1

ハイ、

私は長いリストを持っているので、すべてのコンテンツ リストを選択オプションに入れて短くすることにしました。特定のメーカーを選択すると、そのメーカーの電話番号が表示されます。さまざまなブラウザー (Chrome、Firefox、Opera、Safari) でテストしていたときに、有名な Internet Explorer (ver. 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>

何か案は ？！

ありがとうございました

4

1 に答える 1

0

原因は、IE が変更メソッドに問題を抱えていることです。ここで確認できます。また、ドキュメントの変更メソッドも確認できます。jQuery 1.4 の時点で、変更イベントが Internet Explorer で発生し、他の最新のブラウザーのイベントと一貫して動作することが示されています。 .

この作品をレンダリングするには、IE では change メソッドではなくclickメソッドを使用する必要があります。mozilla、chrome などの他のブラウザーでは、change メソッドを使用します。

これをワンステップで行うには、次のように変更とクリックを同時に使用できます。

<script>

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

このコードは .live() を使用して両方のイベントに応答します

注: jQuery 1.7+ を使用する場合、live()メソッドは削除され、代わりにon()メソッドを使用できます

于 2013-06-19T00:59:24.013 に答える