javascript - วิธีใช้ jQuery เพื่อเลือกตัวเลือกในเมนูดรอปดาวน์?

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

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

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

คำตอบ #1

แล้วไงดี

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

ตัวอย่าง:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

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

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

ตัวอย่าง:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

คำตอบ #2

วิธีแก้ปัญหา:

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

คำตอบ #3

องค์ประกอบ select ของ 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;

คำตอบ #4

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

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

คำตอบ #5

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

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

และในการรับค่าที่เลือกคุณไม่ต้องส่งอาร์กิวเมนต์ใดๆ

$('select').val();

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

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

สาธิต

คำตอบ #6

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

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

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

คำตอบ #7

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

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