วิธีเลือกตัวเลือกแรกของ <select> ด้วย jQuery

ฉันจะเลือกตัวเลือกแรกด้วย jQuery ได้อย่างไร

<select id="target">
  <option value="1">...</option>
  <option value="2">...</option>
</select>

$("#target").val($("#target option:first").val());

คุณสามารถลองสิ่งนี้

$("#target").prop("selectedIndex", 0);

// remove "selected" from any options that might already be selected
$('#target option[selected="selected"]').each(
    function() {
        $(this).removeAttr('selected');
    }
);


// mark the first option as selected
$("#target option:first").attr('selected','selected');

เมื่อคุณใช้

$("#target").val($("#target option:first").val());

สิ่งนี้จะไม่ทำงานใน Chrome และ Safari หากค่าตัวเลือกแรกเป็นโมฆะ

ฉันชอบ

$("#target option:first").attr('selected','selected');

เพราะมันสามารถทำงานได้ในทุกเบราว์เซอร์

การเปลี่ยนค่าของอินพุตที่เลือกหรือการปรับเปลี่ยนแอททริบิวต์ที่เลือกสามารถเขียนทับทรัพย์สินที่เลือกไว้เป็นค่าเริ่มต้นขององค์ประกอบ DOM ส่งผลให้องค์ประกอบที่อาจรีเซ็ตไม่ถูกต้องในรูปแบบที่มีการรีเซ็ตเหตุการณ์ที่เรียกว่า

ใช้วิธีการ prop ของ jQuery เพื่อล้างและตั้งค่าตัวเลือกที่ต้องการ:

$("#target option:selected").prop("selected", false);
$("#target option:first").prop("selected", "selected");

$("#target")[0].selectedIndex = 0;

จุดหนึ่งที่ฉันคิดว่าฉันค้นพบเกี่ยวกับคำตอบที่ได้รับคะแนนสูงสุดคือแม้ว่าพวกเขาจะเปลี่ยนค่าที่เลือกได้อย่างถูกต้อง แต่พวกเขาไม่ได้อัปเดตองค์ประกอบที่ผู้ใช้เห็น (เฉพาะเมื่อพวกเขาคลิกวิดเจ็ต องค์ประกอบที่อัปเดต)

การผูกมัดการเปลี่ยนแปลง. () ไปยังจุดสิ้นสุดจะเป็นการอัพเดตวิดเจ็ต UI ด้วยเช่นกัน

$("#target").val($("#target option:first").val()).change();

(โปรดทราบว่าฉันสังเกตเห็นสิ่งนี้ในขณะที่ใช้ jQuery Mobile และกล่องบนเดสก์ท็อป Chrome ดังนั้นนี่อาจไม่เกิดขึ้นทุกที่)

หากคุณมีตัวเลือกที่ปิดใช้งานคุณสามารถเพิ่มไม่ได้ ([ปิดใช้งาน])เพื่อป้องกันการเลือกตัวเลือกที่จะให้ผลลัพธ์ต่อไปนี้:

$("#target option:not([disabled]):first").attr('selected','selected')

อีกวิธีในการรีเซ็ตค่า (สำหรับองค์ประกอบหลายรายการที่เลือก) อาจเป็น:

$("selector").each(function(){

    /*Perform any check and validation if needed for each item */

    /*Use "this" to handle the element in javascript or "$(this)" to handle the element with jquery */

    this.selectedIndex=0;

});

ง่าย ๆ อย่างนั้น

$('#target option:first').prop('selected', true);

$('#newType option:first').prop('selected', true);

ฉันพบว่าการตั้งค่า attr ที่เลือกไว้ใช้ไม่ได้หากมีแอตทริบิวต์ที่เลือกไว้แล้ว รหัสที่ฉันใช้ตอนนี้จะยกเลิกการตั้งค่าแอตทริบิวต์ที่เลือกไว้ก่อนจากนั้นเลือกตัวเลือกแรก

$('#target').removeAttr('selected').find('option:first').attr('selected', 'selected');

แม้ว่าแต่ละฟังก์ชั่นอาจไม่จำเป็น ...

$('select').each(function(){
    $(this).find('option:first').prop('selected', 'selected');
});

ทำงานได้สำหรับฉัน

นี่คือวิธีที่ฉันจะทำ:

$("#target option")
    .removeAttr('selected')
    .find(':first')     // You can also use .find('[value=MyVal]')
        .attr('selected','selected');

ในที่สุดฉันก็ใช้ทริกเกอร์ ('เปลี่ยน') เช่นนี้

$("#target option:first").attr('selected','selected').trigger('change');

หากคุณจะใช้ตัวเลือกแรกเป็นค่าเริ่มต้นเช่น

<select>
    <option value="">Please select an option below</option>
    ...

จากนั้นคุณสามารถใช้:

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

มันดีและเรียบง่าย

สิ่งนี้ได้ผลสำหรับฉัน!

$("#target").prop("selectedIndex", 0);

ที่ด้านหลังของคำตอบของ James Lee Baker ฉันชอบโซลูชันนี้เนื่องจากไม่ต้องพึ่งการสนับสนุนเบราว์เซอร์สำหรับ: อันดับแรก: เลือกแล้ว ...

$('#target').children().prop('selected', false);
$($('#target').children()[0]).prop('selected', 'selected');

สำหรับฉันมันใช้งานได้เฉพาะเมื่อฉันเพิ่มรหัสต่อไปนี้:

.change();

สำหรับฉันมันใช้งานได้เฉพาะเมื่อฉันเพิ่มรหัสต่อไปนี้: เนื่องจากฉันต้องการ "รีเซ็ต" แบบฟอร์มนั่นคือเลือกตัวเลือกแรกทั้งหมดของการเลือกแบบฟอร์มทั้งหมดฉันใช้รหัสต่อไปนี้:

$('form').find('select').each(function(){ $(this).val($("select option:first").val()); $(this).change(); });

ใช้:

$("#selectbox option:first").val()

โปรดหาวิธีการทำงานที่ง่ายในJSFiddleนี้

สำหรับฉันมันใช้งานได้เฉพาะเมื่อฉันเพิ่มบรรทัดของรหัสต่อไปนี้

$('#target').val($('#target').find("option:first").val());

$("#target").val(null);

ทำงานได้ดีในโครเมี่ยม

หากคุณเก็บวัตถุ jQuery ขององค์ประกอบที่เลือก:

var jQuerySelectObject = $("...");

...

jQuerySelectObject.val(jQuerySelectObject.children().eq(0).val());

ลองใช้วิธีการที่ดีที่สุดโดยใช้ jQuery กับECMAScript 6 :

$('select').each((i, item) => {
  var $item = $(item);
  $item.val($item.find('option:first').val()); 
});

คุณสามารถเลือกตัวเลือกใดก็ได้จากdropdownโดยใช้มัน

// 'N' can by any number of option.  // e.g.,  N=1 for first option
$("#DropDownId").val($("#DropDownId option:eq(N-1)").val()); 

$('select#id').val($('#id option')[index].value)

แทนที่idด้วย id แท็กเฉพาะและดัชนีที่เลือกด้วยองค์ประกอบเฉพาะที่คุณต้องการเลือก

กล่าวคือ

<select class="input-field" multiple="multiple" id="ddlState" name="ddlState">
                                        <option value="AB">AB</option>
                                        <option value="AK">AK</option>
                                        <option value="AL">AL</option>
</select>

ดังนั้นที่นี่สำหรับการเลือกองค์ประกอบแรกฉันจะใช้รหัสต่อไปนี้:

$('select#ddlState').val($('#ddlState option')[0].value)

ใช้:

alert($( "#target option:first" ).text());