選擇選項顯示/隱藏IE9問題

Question

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>

有任何想法嗎 ？！

謝謝

Answer 1

原因是IE的change方法有問題，您可以在這里看到，您也可以在文檔中看到change方法 ，它說從jQuery 1.4開始，Internet Explorer中的change事件冒泡，與其他現代瀏覽器中的事件保持一致。

要渲染此作品，您應該使用click方法而不是在IE中進行更改，對於其他瀏覽器（如mozilla，chrome ....），請使用change方法。

要一步完成此操作，您可以使用change並同時單擊，如下所示：

<script>

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

此代碼使用.live（）來響應兩個事件

注意：如果使用jQuery 1.7+，則live（）方法將被刪除，而可以使用on（）方法代替