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

Select option show/hide IE9 issue

本文关键字：IE9 问题 隐藏 选项 显示 选择      更新时间：2023-09-26

>Hy，

我

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

我的以下 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>

有什么想法吗？！

谢谢

原因是

IE在更改方法方面存在一些问题，您可以在此处看到，您也可以在文档中看到更改方法，它说从jQuery 1.4开始，更改事件在Internet Explorer中冒泡，行为与其他现代浏览器中的事件一致。

要渲染此作品，您应该使用单击方法而不是在IE中进行更改，对于其他浏览器，如Mozilla，Chrome....使用更改方法。

要一步完成此操作，您可以使用更改并同时单击，如下所示：

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

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

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

相关文章：