IE7 / 8中隐藏/显示选择框的问题

时间：2009-08-07 16:27:19

标签： javascript internet-explorer

我一直试图使用Justin Johnson编码的未经测试的功能（再次感谢配偶）， 但我一直在努力解决IE错误。 我是javascript的初学者。

基本上会发生这样的事情：

  1. 用户从选择框中选择一个选项。
  2. 其他相应的选择框变为可见。
  3. 如果之前选择了任何其他选择框，请将其隐藏。

    4. Firefox中一切正常。我改变了选择框，一切正常。 但是，当我尝试在IE7 / 8中使用时，它不会改变任何东西！

    我使用option9.style.cssText='display: none';代替option2.style.display = "none"; ，但它也无效。

    以下是代码（并非所有选择案例都在此代码中，出于阅读目的而代码需要优化，我将在稍后进行）：

    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);
});

    谢谢你。

    这是HTML。

          <div class="pesquisa-event-select"><!-- pesquisa select-boxs -->
            <p>
                <label for="tipo">tipo de evento </label>
                <select id="tipos_evento">
                    <option value="104">todos</option>
                    <option value="8">Conferências/Colóquios</option>
                    <option value="10">Cursos/Workshops</option>
                    <option value="7">Provas académicas</option>
                    <option value="9">Visitas/Observações</option>
                    <option value="12">Ciência(outros)</option>
                    <option value="2">Danças</option>
                    <option value="1">Exposições</option>
                    <option value="3">Multidisciplinar</option>
                    <option value="4">Música</option>
                    <option value="5">Teatro</option>
                    <option value="6">Cultura(outros)</option>
                    <option value="48">Desporto</option>
                </select>
            </p>


       <div id="temas_todos">
            <p>
            <label for="Tema">tema de evento </label>
                <select>
                    <option value="">todos</option>
                <xsl:for-each select="temas_todos/TemasEventos/Row">
                    <xsl:sort select="TipoEvento"/>
                    <option value="{Numero}">
                        <xsl:value-of select="TipoEvento" />_
                        <xsl:value-of select="TemaEvento" />
                    </option>
                </xsl:for-each>
                </select>
            </p>
    </div>

    <div id="temas_conferencias">
            <p>
            <label for="Tema">tema de evento</label>
                <select>
                    <option value="">todos</option>
                <xsl:for-each select="temas_conferencias/TemasEventos/Row">
                    <xsl:sort select="TemaEvento"/>
                    <option value="{Numero}">
                        <xsl:value-of select="TemaEvento" />
                    </option>
                </xsl:for-each>
                </select>

            </p>
    </div>

    <div id="temas_cursos">
           <p>
            <label for="Tema">tema de evento</label>
                <select>
                    <option value="">todos</option>
                <xsl:for-each select="temas_cursos/TemasEventos/Row">
                    <xsl:sort select="TemaEvento"/>
                    <option value="{Numero}">
                        <xsl:value-of select="TemaEvento" />
                    </option>
                </xsl:for-each>
                </select>

            </p>
    </div>

4 个答案:

答案 0 :(得分：0)

您还需要发布HTML，以便我们能够准确了解出现了什么问题。您是否使用ID，名称或两者来描述表单元素？您可能最好使用style.display="none"格式而不是style.cssText，因为在后者中，您将替换该对象的整个样式属性。

答案 1 :(得分：0)

不要破坏你提供的代码......但是实现这一点的方法可能更为清晰。 （代码未经测试）

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);
  }
};

var selectLists = ['temas_conferencias','temas_cursos','temas_provas','temas_visitas','temas_ciencias','temas_dancas','temas_exposicoes','temas_multi','temas_musica','temas_teatro','temas_cultura','temas_desporto','temas_todos'];

var selectHandler = function(){
  var value = this.value;
  var select;
  for(var i=0,sLen=selectLists.length;i<sLen;i++){
     select = document.getElementById(selectLists[i]);
     if(value == (i+1)){
        select.style.display = 'block';
     } else {
        select.style.display = 'none';
     }
  }
};

attachEvento(window, "load", function() {
  // 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);
});

基本上就是这样做。

  1. 它为主选择列表中的onchange或onkeypress事件注册事件处理程序“selectHandler”。

  2. 为了最小化代码，我将“其他”选择列表的ID放入名为“selectLists”的数组中

  3. 当触发selectHandler时，它只是检查主选择的值，然后迭代“selectLists”数组中的其他选择并将显示设置为“none” - 除非它与主选择值匹配，在这种情况下，它会显示它。

答案 2 :(得分：0)

首先清理代码以使其更清晰，然后重试

// 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 selectOptions = new Array();

   selectOptions.push(document.getElementById("temas_conferencias"));
   selectOptions.push(document.getElementById("temas_cursos"));
   ...
   selectOptions.push(document.getElementById("temas_todos"));

       //initialize with all the select boxes hidden except one
       for (var ind=0; ind< (selectOptions.length-1); ind++)
           selectOptions[ind].style.cssText='display: none';
       selectOptions[13].style.cssText='display: block';


   var selectHandler = function() {

       // Hide all
       for (var ind=0; ind< selectOptions.length; ind++)
           selectOptions[ind].style.cssText='display: none';

     // Show and hide the appropriate select's
     switch(this.value) {
       case "8":
       // Conferências / colóquios
       selectOptions[1].style.display = "block";
       break;
       case "10":
       // Cursos/workshops
       selectOptions[2].style.display='block';
       break;
       case "7":
       // provas
       selectOptions[3].style.display='block';
       break;
       case "12":
       // ciencia
       selectOptions[5].style.display='block';
       break;
       selectOptions[13].style.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);
});

答案 3 :(得分：0)

问题是，在attachEvent函数（selectHandler）分配的回调上下文中， this 引用不是受事件影响的元素，是对window对象的引用。

由于您声明了一个变量来存储main_select元素的引用，您可以在switch语句中使用它：

var selectHandler = function() {

    switch(main_select.value) {
    //....
    }
}
相关问题
最新问题