Select option show/hide IE9 issue

Question

Hy,

I have a long list and I decided 2 make it short by putting all the content list in a select options, and when you select a certain manufacturer it shows the phone number for that manufacturer in case. When I was testing it in different browsers (Chrome, Firefox, Opera, Safari), when I got to the famous Internet Explorer (ver. 9), boom is not working. When I select any option, it doesn't show anything at all.

My following html markup is:

<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>

Is just a small part of the list. And my java script markup is :

<script>

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

</script>

Any ideas ?!

Thank you

Answer 1

the cause is that IE have some problem with change method you can see here and you can also see change method in documentation , it say that As of jQuery 1.4, the change event bubbles in Internet Explorer, behaving consistently with the event in other modern browsers.

to render this work you should use click method rather than change in IE, and for other browser like mozilla, chrome .... use change method.

to do this in one step you can use change and click at the same time like this :

<script>

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

this code use .live() to responds to both events

note: if you use jQuery 1.7+ live() method is removed and you can use on() method instead