วิธีการใช้ jQuery เพื่อเลือกตัวเลือกแบบเลื่อนลง

ฉันสงสัยว่ามันเป็นไปได้ที่จะได้รับ jQuery เพื่อเลือก<option>พูดรายการที่ 4 ในกล่องแบบหล่นลง?

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

ฉันต้องการให้ผู้ใช้คลิกที่ลิงค์แล้วมีการเปลี่ยนแปลงกล่องค่าของตนเช่นหากผู้ใช้เลือกได้โดยการคลิกที่<select><option>

เกี่ยวกับ

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

ตัวอย่างที่http://www.jsfiddle.net/gaby/CWvwn/

สำหรับ jQuery รุ่นทันสมัยคุณควรใช้.prop()แทน.attr()

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

ตัวอย่างที่http://jsfiddle.net/gaby/CWvwn/1763/

การแก้ไขปัญหา:

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

องค์ประกอบการเลือก HTML มีselectedIndexคุณสมบัติที่สามารถเขียนได้เพื่อเลือกตัวเลือกเฉพาะ:

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

การใช้ JavaScript ธรรมดาสามารถทำได้โดย:

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

ฉันจะทำแบบนี้

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

หากตัวเลือกของคุณมีค่าคุณสามารถทำได้:

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

'select' จะเป็นรหัสของตัวเลือกของคุณหรือตัวเลือกคลาส หรือหากมีเพียงหนึ่งตัวเลือกคุณสามารถใช้แท็กตามที่อยู่ในตัวอย่าง

วิธีที่ง่ายที่สุดคือval(value)ฟังก์ชั่น:

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

และเพื่อให้ได้ค่าที่คุณเลือกคุณไม่ต้องมีข้อโต้แย้ง:

$('select').val();

นอกจากนี้คุณถ้าคุณมี<option value="valueToSelect">...</option>คุณสามารถทำ:

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

การสาธิต

ใช้รหัสต่อไปนี้หากคุณต้องการเลือกตัวเลือกที่มีค่าเฉพาะ:

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

ฉันชอบ nth-child () ถึง eq () เนื่องจากใช้การจัดทำดัชนีแบบอิงดัชนีแทนที่จะเป็นแบบ 0 ซึ่งสมองของฉันง่ายขึ้นเล็กน้อย

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

ด้วยองค์ประกอบ '' โดยปกติเราจะใช้แอตทริบิวต์ 'value' มันจะทำให้ง่ายต่อการตั้งค่าแล้ว:

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

ลองสิ่งนี้:

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

ความนับถือ!

ตอบด้วย ID:

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

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

หนึ่งข้อแม้ที่นี่คือถ้าคุณมีจาวาสคริปต์เพื่อดูการเปลี่ยนแปลงของตัวเลือก / ตัวเลือกที่คุณต้องเพิ่ม.trigger('change')เพื่อให้รหัสกลายเป็น

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

เพราะการโทรเท่านั้น.attr('selected', 'selected')ไม่ทำให้เกิดเหตุการณ์