explorer not following dropdown list option link under jquery

Question

1st new to this list. please pardon any faux pas....

this is the html... (Q1..not sure of syntax for selected option but this seems to work...)

<select>
<option class=" " value="choose" selected="yes" SELECTED>choose language</option>
<option class=" turnoffbuttonenglish" value="japanese" >日本語 </option>
<option class=" turnoffbuttonjapanese" value="english" >English </option>
<option class="turnonboth" value="both" >both </option>
</select>

each option chooses which language to display in the page and an iframe.

here is the jquery that seems not to be working (I think the problem is here and not elsewhere in my code...)

there are analogous sections of code for the three options. but below is the exammple for class turnoffbuttonjapanese. (name is legacy, it really shows english..class hidden displays none...

 $('.turnoffbuttonjapanese').click( function() {
$currentLanguage ="2" 
$('.japanese').addClass("hidden"); 
$('.english').removeClass("hidden");
$currentIFrame.contents().find(".japanese").each(function(index, item) {
 $(item).addClass("hidden"); 
});
$currentIFrame.contents().find(".english").each(function(index, item) {
 $(item).removeClass("hidden"); 
});
});

This seems to work in opera, but not in explorer!!??? when I select nothing happens.

If instead I have

   <div class=" english hidden turnoffbuttonenglish"> <a
  class=" turnoffenglish" title="see 日本語 page">日本語&nbsp;<img
  src="images/chopsticks150.png" height="100%" alt="chopsticks"> </a></div>

<div class=" japanese turnoffbuttonjapanese"><a
  class=" turnoffjapanese" title="see ENGLISH page">English&nbsp;<img
  src="images/knifeandfork150.png" height="100%" alt="knife and fork"></a>    </div>

this works...???

Answer 1

Instead of relying on the click event of an <option> (which won't work cross-browser as you're seeing), instead go by the value (and if possible, give that <select> an ID to make it cleaner), like this:

$('#mySelectID').change(function() {
  if($(this).val() == "english") {
    $currentLanguage = "2";
    $('.japanese').addClass("hidden"); 
    $('.english').removeClass("hidden");
    $currentIFrame.contents().find(".japanese").addClass("hidden");
    $currentIFrame.contents().find(".english").removeClass("hidden");
  }
});

The reason the first <select> version isn't working is because not all browsers even fire that click event on an <option>, so your code never gets to run. Taking this approach will work and be more cross-browser stable. If you want an immediate effect on browsers that don't fire change until blur occurs, you can run it a bit more often using .bind(), just replace .change(function() { with .bind('change click', function() {.

You can also re-work this a bit, not sure of your overall intentions, for example you can hide all of them, then show the value your selected, instead of an if for each option, making your code much shorter.