选择选项显示/隐藏 IE9 问题答案

【问题标题】：Select option show/hide IE9 issue选择选项显示/隐藏 IE9 问题
【发布时间】：2013-06-19 00:19:54
【问题描述】：

喂，

我有一个很长的列表，我决定 2 通过将所有内容列表放在一个选择选项中来缩短它，当您选择某个制造商时，它会显示该制造商的电话号码以防万一。当我在不同的浏览器（Chrome、Firefox、Opera、Safari）中测试它时，当我使用著名的 Internet Explorer（版本 9）时，boom 无法正常工作。当我选择任何选项时，它根本不显示任何内容。

我的以下 html 标记是：

<select id="technical-assit">
                <option value="choose-brand">Choose Manufacturer</option>
                <option value="3COM">3COM</option>
                <option value="3DFX">3DFX</option>
                <option value="ACER">ACER</option>
                <option value="AIRIS">AIRIS</option>
                <option value="AIT">AIT</option>
                <option value="AGFA">AGFA</option>
                <option value="AIRTEL">AIRTEL / VODAFONE</option>
                <option value="AIWA">AIWA</option>
                <option value="ALCATEL">ALCATEL</option>
</select>

<div id="3COM" class="contact-number" style="display:none">91 509 69 00</div>
<div id="3DFX" class="contact-number" style="display:none">900 501 303</div>
<div id="ACER" class="contact-number" style="display:none">902 202 323</div>
<div id="AIRIS" class="contact-number" style="display:none">902 103 444</div>
<div id="AIT" class="contact-number" style="display:none">902 11 66 21</div>
<div id="AGFA" class="contact-number" style="display:none">902 15 25 93</div>
<div id="AIRTEL" class="contact-number" style="display:none">607 123 000</div>
<div id="AIWA" class="contact-number" style="display:none">91 358 11 02</div>
<div id="ALCATEL" class="contact-number" style="display:none">91 330 40 00</div>

只是列表的一小部分。我的 java 脚本标记是：

<script>

    $(function() {
    $('#technical-assit').change(function(){
        $('.contact-number').hide();
        $('#' + $(this).val()).show();
    });
});

</script>

有什么想法吗？！

谢谢

【问题讨论】：

您能否确认change 处理程序是否被调用？
什么意思？我选择的任何选项都没有显示。我做了一个小例子 - jsfiddle.net/Machy/48EtT
我的意思是如果你在change处理程序中放置一个警报stmt，它是否出现在IE9中
它似乎在 IE9 上运行良好...您是否设置了页面的 !DOCTYPE 和 X-UA-COMPATIBLE 标签？在这里查看：msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx
当我添加 X-UA-COMPATIBLE 标签时它起作用了。我的头部标记中没有那个标签。谢谢

标签： javascript select option

【解决方案1】：

原因是IE的change方法有问题你可以看到here你也可以看到change method in documentation，它说从jQuery 1.4开始，改变事件在Internet Explorer中冒泡，表现一致与其他现代浏览器中的事件。

要渲染这个作品，你应该使用 click 方法而不是在 IE 中更改，对于其他浏览器，如 mozilla、chrome .... 使用更改方法。

要一步完成，您可以像这样使用更改并同时单击：

<script>

$(function() {
   $('#technical-assit').live("change click", function(){
      $('.contact-number').hide();
      $('#' + $(this).val()).show();
   });
});

此代码使用 .live() 来响应这两个事件

注意：如果你使用 jQuery 1.7+，live() 方法被移除，你可以使用 on() 方法代替

【讨论】：