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

Question

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

这是一个js提琴的现场演示链接: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中不能工作的问题是什么。有什么方法可以在ie7或ie8中工作吗?如果能支持ie7就太好了。

谢谢

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

是的，就这么短。: -)

这里是jsFiddle