Làm cách nào để sử dụng jQuery để chọn tùy chọn thả xuống?

Tôi đã tự hỏi nếu có thể để jQuery chọn một mục <option>, giả sử mục thứ 4, trong hộp thả xuống?

<select>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
    <option></option>
</select>

Tôi muốn người dùng nhấp vào một liên kết, sau đó <select>hộp thay đổi giá trị của nó, như thể người dùng đã chọn nó bằng cách nhấp vào <option>.

Làm thế nào về

$('select>option:eq(3)').attr('selected', true);

ví dụ tại http://www.jsfiddle.net/gaby/CWvwn/

Đối với các phiên bản hiện đại của jquery, bạn nên sử dụng .prop()thay vì.attr()

$('select>option:eq(3)').prop('selected', true);

ví dụ tại http://jsfiddle.net/gaby/CWvwn/1763/

Giải pháp:

$("#element-id").val('the value of the option');

Các phần tử chọn HTML có một thuộc selectedIndextính có thể được ghi vào để chọn một tùy chọn cụ thể:

$('select').prop('selectedIndex', 3); // select 4th option

Sử dụng JavaScript đơn giản, điều này có thể đạt được bằng cách:

// use first select element
var el = document.getElementsByTagName('select')[0]; 
// assuming el is not null, select 4th option
el.selectedIndex = 3;

Tôi sẽ làm theo cách này

 $("#idElement").val('optionValue').trigger('change');

nếu tùy chọn của bạn có giá trị, bạn có thể làm điều này:

$('select').val("the-value-of-the-option-you-want-to-select");

'select' sẽ là id của lựa chọn của bạn hoặc bộ chọn lớp. hoặc nếu chỉ có một lựa chọn, bạn có thể sử dụng thẻ như trong ví dụ.

Cách dễ nhất là val(value)chức năng:

$('select').val(2);

Và để có được giá trị đã chọn, bạn không đưa ra đối số:

$('select').val();

Ngoài ra, nếu bạn có <option value="valueToSelect">...</option>, bạn có thể làm:

$('select').val("valueToSelect");

BẢN GIỚI THIỆU

Sử dụng mã sau nếu bạn muốn chọn một tùy chọn có giá trị cụ thể:

$('select>option[value="' + value + '"]').prop('selected', true);

 Try with the below codes. All should work. 
    $('select').val(2);
    $('select').prop('selectedIndex', 1);
    $('select>option[value="5"]').prop('selected', true);
    $('select>option:eq(3)').attr('selected', 'selected');
    $("select option:contains(COMMERCIAL)").attr('selected', true);

Tôi thích nth-child () hơn eq () vì nó sử dụng lập chỉ mục dựa trên 1 thay vì dựa trên 0, điều này dễ hơn một chút trong não của tôi.

//selects the 2nd option
$('select>option:nth-child(2)').attr('selected', true);

Với phần tử '' thường chúng ta sử dụng thuộc tính 'value'. Nó sẽ làm cho nó dễ dàng hơn để thiết lập sau đó:

$('select').val('option-value');

Thử cái này:

$('#mySelectElement option')[0].selected = true;

Trân trọng!

trả lời bằng id:

$('#selectBoxId').find('option:eq(0)').attr('selected', true);

 $('select>option:eq(3)').attr('selected', 'selected');

Một lưu ý ở đây là nếu bạn có javascript xem sự kiện thay đổi của select / tùy chọn, bạn cần thêm .trigger('change')để mã trở thành.

 $('select>option:eq(3)').attr('selected', 'selected').trigger('change');

bởi vì chỉ gọi .attr('selected', 'selected')không kích hoạt sự kiện