jquery option select not working in chrome

问题:

I'm trying to auto select the option in select by jquery after fetching the option value that needs to be selected. However it is not working in Chrome. Its working in firefox and IE 9. Why is it so ? function fill is the one that fills in the values. (function res, only resets the values filled by function fill and is not important for this question)

function fill(thisValue) {
    $('#inputString').val(thisValue);
    $.post("get.php?op=category", {queryString: ""+thisValue+""}, function(data){
            if(data.length >0) {
                $("#mymenu option[value='"+data+"']").attr('selected', 'selected');
                $('#mymenu').attr("disabled","disabled");
            }
        });
    $.post("get.php?op=name", {queryString: ""+thisValue+""}, function(data){
            if(data.length >0) {
                $('#nameString').val(data);
                $('#nameString').attr("disabled","disabled");
            }
        });
    $.post("get.php?op=author", {queryString: ""+thisValue+""}, function(data){
            if(data.length >0) {
                $('#authorString').val(data);
                $('#authorString').attr("disabled","disabled");                 
            }
        });
    $.post("get.php?op=publisher", {queryString: ""+thisValue+""}, function(data){
            if(data.length >0) {
                $('#publisherString').val(data);
                $('#publisherString').attr("disabled","disabled");
            }
        });


    setTimeout("$('#suggestions').hide();", 200);
}

function res(inputString) {
$('#publisherString').attr("disabled", false);
$('#publisherString').val('');
$('#nameString').attr("disabled",false);
$('#nameString').val('');
$('#authorString').attr("disabled",false);
$('#authorString').val('');
$('#mymenu').attr("disabled",false);
$('#mymenu option').attr('selected', false);
}

回答1:

You can use val() to set the value of a select element.

Change

$("#mymenu option[value='"+data+"']").attr('selected', 'selected');

to

$("#mymenu").val(data);

Demo Fiddle

Another solution is to use prop(). The attr() method is used to set the attribute value of the element not to set the property.

$('#mymenu option[value="5"]').prop('selected', true)

You can read more about attr vs prop, as well as the jQuery 1.6 release note

Demo Fiddle

回答2:

When you use data with a typo in the statement below it looks like val is not working. Took me a while to notice.

$("#mymenu").val(data);

回答3:

Here's something I just noticed concerning the name you set in the option tag. I'll use my code as an example. You see where it says Blue and Black below?

<option value="b">Blue</option>
<option value="k">Black</option>

Let's say Blue is currently selected. If you push the letter 'B' on your keyboard (case sensitivity doesn't matter) it will not change no matter what. This is true even if you have an onkeydown event that is supposed to set the value, such as:

$(function () {
    // Set the value on key down
    $("select[id=stoneColor1]").on("keydown", function(e) {

        var key = String.fromCharCode(e.keyCode);
        for (var i=0; i<stoneColorOptions.length; i++) {
            if (stoneColorOptions[i].keyPress == key) {
                $("#stoneColor1").val(key.toLowerCase());
                break;
            }
        }
    });
});

Recall I said the above code will NOT work if I have

<option value="b">Blue</option>
<option value="k">Black</option>

However, it DOES work when I have

<option value="b">(B) Blue</option>
<option value="k">(K) Black</option>

So yea, moral of the story: it seems you also have to take into consideration the first letter in your option name.