jQuery/Programmatically Chọn một tùy chọn trong hộp chọn

Question

Tôi hiện đang sử dụng jQuery để trả về một số kết quả JSON. Khi các kết quả này được trả về, tôi sẽ sử dụng chúng để điền trước các trường trong biểu mẫu của tôi.

Tuy nhiên, tôi cần một số trợ giúp trong việc chọn trước các mục trong hộp thả xuống. Ví dụ, tôi có một hộp chọn (điều này được rút ngắn):

<select id="startTime"> 
<option value="14:00:00">2:00 pm</option> 
<option value="15:00:00">3:00 pm</option> 
<option value="16:00:00">4:00 pm</option> 
<option value="17:00:00">5:00 pm</option> 
<option value="18:00:00">6:00 pm</option> 
</select> 

Và nếu giá trị JSON của tôi là:

var start_time = data[0].start // Let's say this is '17:00:00' 

Làm thế nào tôi có thể sử dụng jQuery, hãy lựa chọn với giá trị '17: 00:00 'được chọn?

<option value="17:00:00" selected="selected">5:00 pm</option> 

Answer 1

update:

Tính đến jQuery 1.9, jQuery đã cập nhật thay đổi chức năng này. Trạng thái "được chọn" của một tùy chọn thực sự là một thuộc tính, do đó jQuery đã thay đổi điều này để sử dụng phương thức .prop(). Cú pháp là rất giống nhau và dễ dàng chuyển đổi:

$('#startTime option[value=17:00:00]').prop('selected', true); 

Xem http://api.jquery.com/prop/#entry-longdesc cho lý do tại sao nó cần phải vượt qua true.

---

Cũ hơn jQuery

$('#startTime option[value=17:00:00]').attr('selected', 'selected'); 

hoặc

$('#startTime option[value='+ data[0].start +']').attr('selected', 'selected'); 

Answer 2

$('#startTime').val(start_time); 

Answer 3

Nó chỉ $("#startTime").val(start_time);

Answer 4

Đối với một số lý do đối với tôi nó hoạt động như thế này:

$('#startTime').val(''+data[0].start+''); 

Answer 5

CẬP NHẬT

Kể từ jQuery 1.9, jQuery đã cập nhật đã thay đổi chức năng này. Trạng thái "được chọn" của một tùy chọn thực sự là một thuộc tính, do đó jQuery đã thay đổi điều này để sử dụng phương thức .prop(). Cú pháp là rất giống nhau và dễ dàng chuyển đổi:

$('option[value=17:00:00]').prop('selected', 'selected'); 

Answer 6

Thông tin bổ sung cho jquery người dùng di động (1.3.0):

Dưới đây là một similar example.

Nếu bạn cố gắng ví dụ trên với jquery 1.9.1 và 1.3.0 jquery mobile bạn có thể thấy rằng nó không làm việc trừ khi bạn thêm một

$("#location_list").selectmenu("refresh"); 

Giữ ý nghĩ đó khi làm việc với jquery di động. Nó đã cho tôi rất nhiều đau đầu

Answer 7

var varValue="17:00:00"; 
$("#startTime").ready(function(){ 
    $("#startTime option[value='"+varValue+"']").prop("selected", "selected"); }); 

trình cho tôi về jQuery 1.10