Internet Explorer的jQuery选择框问题

Question

Ok, this might be a really odd problem. I am writing a web application, and I want to change the value of a certain select box:

<select name="type" class="type">
<option value="word">word</option>
<option value="digit">digit</option>
<option value="letter">letter</option>
<option value="single">single character</option>
<option value="space">space</option>
</select>

In my code I have this:

switch ( target ) {
case "d":
$("select").val('digit');
break;
case "w":
$("select").val('word');
break;
case "s":
$("select").val('space');
break;
}

Here is the problem. This code works as expected in all browsers...except for IE. Internet Explorer (8, if you're curious) processes them all correctly except for the $("select").val("digit") part. It just won't change the value for some reason. The javascript parser properly navigates to that case in the switch and all, but it refuses to change the value of the select box for that one case. Anyone have any ideas?

Answer 1

Have you tried

$('select').find('option[value=digit]').prop('selected', true); // and etc.

instead?

edit well I would probably try that myself, because that's just me, but looking at the jQuery source it pretty much does that for you anyway. (That is, jQuery doesn't just try to set the "value" attribute on the <select> tag, which I think works in FF but not IE.)

edit more well I set up a test page and it works fine for me in FF and also in IE8. You can look at my test page here: http://gutfullofbeer.net/select.html

edit — 12 Jul 2012 — .prop() is preferred now (jQuery 1.6), so I've updated the example.

Answer 2

You can try adding the word 'selected' to the option you want to show rather than changing the value of the select tag. You would want the HTML of the option you want to look like...

<option selected value="word">word</option>

Where the word is in the tag does not matter.