Databases
StackOverflow2013
Postsdbo
POProblem with hide/show select box in IE7/8
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POProblem with hide/show select box in IE7/8
    primarykey
    data
    text
    <p>Ive been trying to use an untested function that Justin Johnson coded(thanks again mate), but ive been struggling with IE errors. Im a begginner in javascript.</p> <p>Basically what happens is this:</p> <ol> <li>User chooses an option from a select box.</li> <li>Other corresponding select box becomes visible.</li> <li>If there is any other select box that was choosed earlier, hide it.</li> </ol> <p>Everything is ok in Firefox. I change the select box and everything works. But when i try to use in IE7/8 it doesnt change nothing!</p> <p>I used the <code>option9.style.cssText='display: none';</code> instead of the <code>option2.style.display = "none"; </code> but it doesnt work either.</p> <p>Here is the code(not all the select cases are in this code, for reading purpose and the code needs optimization, i will do it later on):</p> <pre><code>var attachEvento = function(node, event, listener, useCapture) { // Method for FF, Opera, Chrome, Safari if (window.addEventListener ) { node.addEventListener(event, listener, useCapture || false); } // IE has its own method else { node.attachEvent('on'+event, listener); } }; // Once the window loads and the DOM is ready, attach the event to the main attachEvento(window, "load", function() { var main_select = document.getElementById("tipos_evento"); var option1 = document.getElementById("temas_conferencias"), option2 = document.getElementById("temas_cursos"), option3 = document.getElementById("temas_provas"), option4 = document.getElementById("temas_visitas"), option5 = document.getElementById("temas_ciencias"), option6 = document.getElementById("temas_dancas"), option7 = document.getElementById("temas_exposicoes"), option8 = document.getElementById("temas_multi"), option9 = document.getElementById("temas_musica"), option10 = document.getElementById("temas_teatro"), option11 = document.getElementById("temas_cultura"), option12 = document.getElementById("temas_desporto"), option13 = document.getElementById("temas_todos"); //initialize with all the select boxes hidden except one option1.style.cssText='display: none'; option2.style.cssText='display: none'; option3.style.cssText='display: none'; option4.style.cssText='display: none'; option5.style.cssText='display: none'; option6.style.cssText='display: none'; option7.style.cssText='display: none'; option8.style.cssText='display: none'; option9.style.cssText='display: none'; option10.style.cssText='display: none'; option11.style.cssText='display: none'; option12.style.cssText='display: none'; option13.style.cssText='display: block'; var selectHandler = function() { // Show and hide the appropriate select's switch(this.value) { case "8": // Conferências / colóquios option1.style.display = "block"; option2.style.display = "none"; option3.style.display = "none"; option4.style.display = "none"; option5.style.display = "none"; option6.style.display = "none"; option7.style.display = "none"; option8.style.display = "none"; option9.style.display = "none"; option10.style.display = "none"; option11.style.display = "none"; option12.style.display = "none"; option13.style.display = "none"; break; case "10": // Cursos/workshops option1.style.cssText='display: none'; option2.style.cssText='display: block'; option3.style.cssText='display: none'; option4.style.cssText='display: none'; option5.style.cssText='display: none'; option6.style.cssText='display: none'; option7.style.cssText='display: none'; option8.style.cssText='display: none'; option9.style.cssText='display: none'; option10.style.cssText='display: none'; option11.style.cssText='display: none'; option12.style.cssText='display: none'; option13.style.cssText='display: none'; break; case "7": // provas option1.style.cssText='display: none'; option2.style.cssText='display: none'; option3.style.cssText='display: block'; option4.style.cssText='display: none'; option5.style.cssText='display: none'; option6.style.cssText='display: none'; option7.style.cssText='display: none'; option8.style.cssText='display: none'; option9.style.cssText='display: none'; option10.style.cssText='display: none'; option11.style.cssText='display: none'; option12.style.cssText='display: none'; option13.style.cssText='display: none'; break; case "12": // ciencia option1.style.cssText='display: none'; option2.style.cssText='display: none'; option3.style.cssText='display: none'; option4.style.cssText='display: none'; option5.style.cssText='display: block'; option6.style.cssText='display: none'; option7.style.cssText='display: none'; option8.style.cssText='display: none'; option9.style.cssText='display: none'; option10.style.cssText='display: none'; option11.style.cssText='display: none'; option12.style.cssText='display: none'; option13.style.cssText='display: none'; break; default: // Hide all option1.style.cssText='display: none'; option2.style.cssText='display: none'; option3.style.cssText='display: none'; option4.style.cssText='display: none'; option5.style.cssText='display: none'; option6.style.cssText='display: none'; option7.style.cssText='display: none'; option8.style.cssText='display: none'; option9.style.cssText='display: none'; option10.style.cssText='display: none'; option11.style.cssText='display: none'; option13.style.cssText='display: block'; } }; // Use the onchange and onkeypress events to detect when the // value of main_select has changed attachEvento(main_select, "change", selectHandler); attachEvento(main_select, "keypress", selectHandler); }); </code></pre> <p>Thank u.</p> <p>Here is the HTML.</p> <pre><code> &lt;div class="pesquisa-event-select"&gt;&lt;!-- pesquisa select-boxs --&gt; &lt;p&gt; &lt;label for="tipo"&gt;tipo de evento &lt;/label&gt; &lt;select id="tipos_evento"&gt; &lt;option value="104"&gt;todos&lt;/option&gt; &lt;option value="8"&gt;Conferências/Colóquios&lt;/option&gt; &lt;option value="10"&gt;Cursos/Workshops&lt;/option&gt; &lt;option value="7"&gt;Provas académicas&lt;/option&gt; &lt;option value="9"&gt;Visitas/Observações&lt;/option&gt; &lt;option value="12"&gt;Ciência(outros)&lt;/option&gt; &lt;option value="2"&gt;Danças&lt;/option&gt; &lt;option value="1"&gt;Exposições&lt;/option&gt; &lt;option value="3"&gt;Multidisciplinar&lt;/option&gt; &lt;option value="4"&gt;Música&lt;/option&gt; &lt;option value="5"&gt;Teatro&lt;/option&gt; &lt;option value="6"&gt;Cultura(outros)&lt;/option&gt; &lt;option value="48"&gt;Desporto&lt;/option&gt; &lt;/select&gt; &lt;/p&gt; &lt;div id="temas_todos"&gt; &lt;p&gt; &lt;label for="Tema"&gt;tema de evento &lt;/label&gt; &lt;select&gt; &lt;option value=""&gt;todos&lt;/option&gt; &lt;xsl:for-each select="temas_todos/TemasEventos/Row"&gt; &lt;xsl:sort select="TipoEvento"/&gt; &lt;option value="{Numero}"&gt; &lt;xsl:value-of select="TipoEvento" /&gt;_ &lt;xsl:value-of select="TemaEvento" /&gt; &lt;/option&gt; &lt;/xsl:for-each&gt; &lt;/select&gt; &lt;/p&gt; &lt;/div&gt; &lt;div id="temas_conferencias"&gt; &lt;p&gt; &lt;label for="Tema"&gt;tema de evento&lt;/label&gt; &lt;select&gt; &lt;option value=""&gt;todos&lt;/option&gt; &lt;xsl:for-each select="temas_conferencias/TemasEventos/Row"&gt; &lt;xsl:sort select="TemaEvento"/&gt; &lt;option value="{Numero}"&gt; &lt;xsl:value-of select="TemaEvento" /&gt; &lt;/option&gt; &lt;/xsl:for-each&gt; &lt;/select&gt; &lt;/p&gt; &lt;/div&gt; &lt;div id="temas_cursos"&gt; &lt;p&gt; &lt;label for="Tema"&gt;tema de evento&lt;/label&gt; &lt;select&gt; &lt;option value=""&gt;todos&lt;/option&gt; &lt;xsl:for-each select="temas_cursos/TemasEventos/Row"&gt; &lt;xsl:sort select="TemaEvento"/&gt; &lt;option value="{Numero}"&gt; &lt;xsl:value-of select="TemaEvento" /&gt; &lt;/option&gt; &lt;/xsl:for-each&gt; &lt;/select&gt; &lt;/p&gt; &lt;/div&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USdutraveller
    1. USdutraveller
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload