javascript - 浏览器问题 :Branching Select Drop Down Not Supporting in IE 7 or 8

Question

我有一个 Branching Drop down，它在 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