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

我一直在尝试使用Justin Johnson编写的未经测试的函数（再次感谢mate）， 但我一直在与IE错误作斗争。 我是一个javascript的乞丐

基本上是这样的：

用户从选择框中选择一个选项

其他相应的选择框变为可见

如果之前选择了任何其他选择框，请将其隐藏

Firefox中一切正常。我改变了选择框，一切正常。 但当我尝试在IE7/8中使用时，它并没有改变任何事情

我使用了

选项9.style.cssText='display:none'而不是
选项2.style.display=“无”；
但它也不起作用

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

谢谢你

这是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>



蒂波德埃弗托酒店
待办事项
协商/协商
卡索斯/讲习班
普罗瓦斯学院
参观/观察
Ciência（奥特罗斯）
丹萨斯
暴露
多学科
穆西卡
蒂特罗
文化（奥特罗斯）
德斯波尔托


特马事件
待办事项
_


特马事件
待办事项


特马事件
待办事项

您还需要发布您的HTML，以便我们能够准确地了解出了什么问题。是否使用ID、名称或两者来描述表单元素？您最好使用
style.display=“none”
格式，而不是
style.cssText
，因为在后者中，您将替换该对象的整个样式属性。
不要抨击提供给您的代码。。。但可能有一种更干净的方法来实现这一点。（代码未经测试）

var attachEvento=函数（节点、事件、侦听器、useCapture）{
//用于FF、Opera、Chrome和Safari的方法
如果（window.addEventListener）{
node.addEventListener（事件、侦听器、useCapture | | false）；
}
//IE有自己的方法
否则{
attachEvent（'on'+事件，侦听器）；
}
};
var SelectList=[“临时会议”，“临时会议”，“临时会议”，“临时会议”，“临时会议”，“临时参观”，“临时科学”，“临时舞蹈”，“临时展览”，“临时音乐”，“临时音乐”，“临时教学”，“临时文化”，“临时音乐”，“临时音乐”，“临时音乐”；
var selectHandler=function（）{
var值=此值；
var选择；
对于（var i=0，sLen=selectLists.length；i首先清理代码以使其更清晰，然后重试

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

//加载窗口并准备好DOM后，将事件附加到主
attachEvento（窗口，“加载”，函数（）{
var main_select=document.getElementById（“tipos_evento”）；
var selectOptions=new Array（）；
选择options.push（document.getElementById（“temas_conferenceas”）；
选择Options.push（document.getElementById（“temas_cursos”）；
...
选择options.push（document.getElementById（“temas_todos”）；
//初始化时，除一个选择框外，所有选择框均隐藏
对于（var ind=0；ind<（selectOptions.length-1）；ind++）
选择选项[ind].style.cssText='display:none'；
选择选项[13]。style.cssText='display:block'；
var selectHandler=function（）{
//全部隐藏
对于（var ind=0；ind
问题在于，在由
attachEvent
函数（
selectHandler
）分配的回调上下文中，此引用不是受事件影响的元素，而是对
窗口
对象的引用

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

var selectHandler = function() {

    switch(main_select.value) {
    //....
    }
}

谢谢你。我插入了它，但它没有令人遗憾地工作。也许我不能成为一名程序员。我不理解****它。你不必插入上面的代码，你只需将这行代码更改为：switch（this.value）{to:switch（main\u select.value）{
// 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);
});

var selectHandler = function() {

    switch(main_select.value) {
    //....
    }
}