tùy chọn jquery chọn không hoạt động trong chrome

Question

Tôi đang cố gắng tự động chọn tùy chọn được chọn bằng jquery sau khi tìm nạp giá trị tùy chọn cần được chọn. Tuy nhiên, nó không hoạt động trong Chrome. Nó hoạt động trong firefox và IE 9. Tại sao nó lại như vậy? chức năng điền là một điền vào các giá trị. (res chức năng, chỉ reset các giá trị lấp đầy bởi chức năng điền và không phải là quan trọng đối với câu hỏi này)

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

Bạn có thể sử dụng val() để thiết lập giá trị của một nguyên tố select.

Thay đổi

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

để

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

Demo Fiddle

Một giải pháp khác là sử dụng prop(). Phương thức attr() được sử dụng để đặt giá trị thuộc tính của phần tử không đặt thuộc tính.

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

Bạn có thể đọc thêm về attr vs prop, cũng như jQuery 1.6 release note

Demo Fiddle

Answer 2

Khi bạn sử dụng dữ liệu với một typo trong báo cáo dưới đây có vẻ như val không hoạt động. Đã cho tôi một thời gian để thông báo.

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

Answer 3

Đây là điều tôi vừa nhận thấy liên quan đến tên bạn đặt trong thẻ tùy chọn. Tôi sẽ sử dụng mã của tôi làm ví dụ. Bạn thấy nơi nó nói Blue và Black dưới đây?

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

Giả sử Blue hiện được chọn. Nếu bạn đẩy chữ 'B' trên bàn phím của bạn (trường hợp nhạy cảm không quan trọng) nó sẽ không thay đổi bất kể điều gì. Điều này đúng ngay cả khi bạn có một sự kiện onkeydown đó là nghĩa vụ để thiết lập giá trị, chẳng hạn như:

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

Nhớ lại tôi đã nói các mã trên sẽ không hoạt động nếu tôi có

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

Tuy nhiên, nó DOES làm việc khi tôi có

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

Vì vậy, yê, đạo đức của câu chuyện: có vẻ như bạn cũng phải xem xét chữ cái đầu tiên trong tên tùy chọn của mình.