浏览器问题：在 IE 7 或 8 中不支持分支选择下拉菜单

Question

我有一个在 IE 版本 7 和 8 中不工作但在所有其他浏览器中工作的分支下拉菜单。

这是现场演示的 js Fiddle 链接：http://jsfiddle.net/r64w7/

我的代码：

HTML：

<div>
    <label >Select a step</label>
    <select id="selectCreateNew">
            <option value="input">
                    Input
            </option>
            <option value="radio">
                    Radio
            </option>
    </select>
</div>
   <div id="section1" style="display:none;">
      <label >Input</label>
      <input name="" type="text"/>
    </div>
   <div id="section2" style="display:none;">
         <label >Radio</label>
         <input name="" type="radio" value=""/>
   </div>

javascripts

var sections ={
'input': 'section1',
'radio': 'section2',
};

 selection = function(select) {

 for(i in sections)
 document.getElementById(sections[i]).style.display = "none";    
 document.getElementById(sections[select.value]).style.display = "block";

  }

  document.getElementById('selectCreateNew').addEventListener('change', function() {

  selection(this); 
try{for(var lastpass_iter=0; lastpass_iter < document.forms.length; lastpass_iter++)
   { var lastpass_f = document.forms[lastpass_iter];
     if(typeof(lastpass_f.lpsubmitorig2)=="undefined")
   { lastpass_f.lpsubmitorig2 = lastpass_f.submit; lastpass_f.submit = function()
     { var form=this; var customEvent = document.createEvent("Event");
          customEvent.initEvent("lpCustomEvent", true, true);
          var d = document.getElementById("hiddenlpsubmitdiv");
          for(var i = 0; i < document.forms.length; i++)

          { if(document.forms[i]==form){ d.innerText=i; } }
          d.dispatchEvent(customEvent); 
          form.lpsubmitorig2(); } } }}catch(e){}

  });

我在 java 脚本和 jQuery 方面真的很差。我从我的另一篇文章中得到这个。我没有弄清楚他不在 IE 7 和 8 中工作的问题。有什么方法可以在 IE 7 或 8 中完成这项工作。如果能支持 IE 7 那就太好了。

谢谢

Answer 1

我知道这个问题没有被标记为 jQuery，但是在问题中提到了它，所以我觉得基于 jQuery 的答案是合适的，因为这实际上 非常 使用 jQuery 很容易。

这是您的 HTML 代码。我已经稍微修改了它 - 请注意选项的更改值和部分周围的额外包装 <div>：

<div>
    <label >Select a step</label>
    <select id="selectCreateNew">
            <option value="section1">
                    Input
            </option>
            <option value="section2">
                    Radio
            </option>
    </select>
</div>
<div id='sections'>
    <div id="section1" style="display:none;">
       <label >Input</label>
       <input name="" type="text"/>
    </div>
    <div id="section2" style="display:none;">
         <label >Radio</label>
         <input name="" type="radio" value=""/>
    </div>
</div>

..和一些 jQuery 代码来做魔术：

$('#selectCreateNew').change(function() {
    var showme = $(this).val();
    $('#sections>div').each(function(i,e) {
        $(e).toggle(e.id === showme);
    });
});

是的，就是这么短。 :-)

Here it is as a jsFiddle