问题与IE7/8

伊夫隐藏/显示选择框一直在尝试用一个未经测试函数，贾斯汀·约翰逊编码（再次感谢队友），但香港专业教育学院与IE浏览器的错误一直在挣扎。在JavaScript中我是一个开山人。问题与IE7/8

基本上会发生什么情况是这样的：

用户选择从一个选择框的选项。
其他相应的选择框变得可见。
如果还有其他选择框在早些时候选择，请将其隐藏。

一切都在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>

来源

2009-08-07 dutraveller

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

来源

2009-08-07 16:50:55 JustinStolle

不是来砸你提供的代码...但有可能实现这种更清洁的方式。（代码未经测试）

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

本质上它是这样做的。

它注册为主要选择列表上的onchange或onkeypress事件事件的事件处理程序“每个所选的”。
要最小化的代码，我已经把“其他”选择名单编号到名为“selectLists”数组
当每个所选的被触发，它只是检查的主要选择的价值，然后迭代“selectLists”数组中的其他选择，并将显示设置为“无” - 除非它与主选择值相匹配，在这种情况下，它将显示它。

来源

2009-08-07 16:52:31 scunliffe

先清理代码，使其更清晰，然后再试一次

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

来源

2009-08-07 16:59:50

的问题是，在由attachEvent功能（selectHandler）分配回调的背景下，此引用不是受事件影响的元素，是对window对象的引用。

既然你声明的变量来存储main_select元素的参考，你可以用它在你的switch语句：

var selectHandler = function() { 

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

来源

2009-08-07 17:07:08 CMS

感谢üCMS。我已经插入了，但它并不工作不幸。也许我不能成为程序员..我不明白****它 – dutraveller 2009-08-07 17:37:27

你不必插入上面的代码，你应该只*改变*这一行：* switch（this.value）{* to ：*开关（main_select.value）{* – CMS 2009-08-07 18:16:32

是的，我只是改变了那条线。我很笨，但不soooo愚蠢:) – dutraveller 2009-08-07 18:32:17

回答

相关问题