Opcja jquery nie działa w chrome

Question

Próbuję automatycznie wybrać opcję w select przez jquery po pobraniu wartości opcji, która musi zostać wybrana. Jednak nie działa w Chrome. Działa w firefoxie i IE 9. Dlaczego tak jest? wypełnienie funkcji to ten, który wypełnia wartości. (res funkcyjne, tylko zeruje wartości wypełnionych przez funkcję wypełnienia i nie ma znaczenia dla tego pytania)

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); 
} 

Answer 1

Można użyć val(), aby ustawić wartość elementu select.

Zmień

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

do

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

Demo Fiddle

Innym rozwiązaniem jest użycie prop(). Metoda attr() służy do ustawiania wartości atrybutu elementu, aby nie ustawiać właściwości.

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

Możesz przeczytać więcej o attr vs prop, jak również jQuery 1.6 release note

Demo Fiddle

Answer 2

Podczas korzystania z danych z typo w zestawieniu poniżej wygląda val nie działa. Zajęło mi to trochę czasu.

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

Answer 3

Oto coś, co właśnie zauważyłem, dotyczące nazwy ustawionej w znaczniku opcji. Użyję mojego kodu jako przykładu. Widzisz, gdzie poniżej jest napisane Niebiesko-czarne?

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

Załóżmy, że obecnie wybrano kolor niebieski. Jeśli naciśniesz literę "B" na klawiaturze (wielkość liter nie ma znaczenia), nie zmieni się bez względu na wszystko. To prawda, nawet jeśli masz onKeyDown wydarzenie, które ma na celu ustawienie wartości, takich jak:

$(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; 
      } 
     } 
    }); 
}); 

Przypomnijmy powiedziałem wyżej kod nie działa, jeśli mam

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

Jednakże, działa, gdy mam

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

Więc tak, morał z tej historii: wydaje się, trzeba także wziąć pod uwagę pierwszą literę w nazwie opcji.