จะเลือกองค์ประกอบแรกในดรอปดาวน์โดยใช้ jquery ได้อย่างไร?


106

ฉันต้องการทราบวิธีเลือกตัวเลือกแรกในแท็กที่เลือกทั้งหมดบนเพจของฉันโดยใช้ jquery

ลองสิ่งนี้:

$('select option:nth(0)').attr("selected", "selected"); 

แต่ไม่ได้ผล

คำตอบ:


193

ลองดูสิ ...

$('select option:first-child').attr("selected", "selected");

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

var myDDL = $('myID');
myDDL[0].selectedIndex = 0;

ดูโพสต์นี้เกี่ยวกับวิธีตั้งค่าตามมูลค่าน่าสนใจ แต่จะไม่ช่วยคุณสำหรับปัญหานี้:

เปลี่ยนค่าที่เลือกของรายการดรอปดาวน์ด้วย jQuery


เพียงแค่เปลี่ยน myID เพื่อเลือกตามที่ฉันต้องการแท็กที่เลือกทั้งหมด
Amr Elgarhy

26
ตอนนี้ใน jQuery คุณสามารถเข้าถึงคุณสมบัติผ่าน.prop()วิธีการ ดังนั้นคุณสามารถใช้$("select").prop("selectedIndex",0);วิธีที่รวดเร็วในการเลือกตัวเลือกแรกในรายการแบบเลื่อนลงทั้งหมด
CBarr

3
คุณรู้หรือไม่ว่าสิ่งนี้จะทำให้เกิดเหตุการณ์ "เปลี่ยนแปลง" ในทุกเบราว์เซอร์เพียงแค่ตั้งค่าแอตทริบิวต์ ดูเหมือนว่าจะอยู่ใน Chrome แต่ยังไม่ได้ทดสอบอย่างกว้างขวาง ฉันกำลังคิดเกี่ยวกับการเพิ่มอีก$('select').trigger('change');ในกรณี ขอบคุณ!
Brian Armstrong

3
var myDDL = $('myID')ควรมีแฮชในตัวเลือกเพื่อให้กลายเป็นvar myDDL = $('#myID')
user1069816

1
วิธีนี้ใช้ได้ดีกับฉัน:$('select option').first().prop('selected',true);
Lorenzo Magon

13

ตัวเลือกของคุณไม่ถูกต้องคุณอาจกำลังมองหา

$('select option:nth-child(1)')

สิ่งนี้จะใช้งานได้:

$('select option:first-child')

3
ดัชนีตัวเลือก CSS ที่ n ลูกเริ่มต้นที่ 1 ไม่ใช่ 0
Sergey

10

โซลูชันทางเลือกของ Ana สำหรับ RSolgberg ซึ่งทำให้'onchange'เหตุการณ์เกิดขึ้นหากมี:

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

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


1
วิธีนี้ใช้ได้ผลดีกว่าคำตอบที่ยอมรับหากคุณต้องเปลี่ยนตัวเลือกที่เลือกหลาย ๆ ครั้ง เช่นถ้าคุณกรองตัวเลือกของคุณและแสดงบางส่วน
Guillaume Renoult


4

สิ่งที่คุณต้องการอาจเป็น:

$("select option:first-child")

รหัสนี้คืออะไร

attr("selected", "selected");

กำลังดำเนินการตั้งค่าแอตทริบิวต์ "selected" เป็น "selected"

หากคุณต้องการตัวเลือกที่เลือกไม่ว่าจะเป็นลูกคนแรกหรือไม่ก็ตามตัวเลือกคือ:

$("select").children("[selected]")

1
แทนที่attrด้วยpropถ้าคุณใช้ jQuery 1.6+
Jesan Fafon

2

ฉันกำลังตอบรับเนื่องจากคำตอบก่อนหน้านี้หยุดทำงานกับ jQuery เวอร์ชันล่าสุด ฉันไม่รู้ว่ามันหยุดทำงานเมื่อไหร่ แต่เอกสารบอกว่า. prop () เป็นวิธีที่ต้องการในการรับ / ตั้งค่าคุณสมบัติตั้งแต่ jQuery 1.6

นี่คือวิธีที่ฉันใช้งานได้ (ด้วย jQuery 3.2.1):

$('select option:nth-child(1)').prop("selected", true);

ฉันใช้ knockoutjs และการเชื่อมโยงการเปลี่ยนแปลงไม่ได้ทำงานด้วยรหัสด้านบนดังนั้นฉันจึงเพิ่ม. change () ต่อท้าย

นี่คือสิ่งที่ฉันต้องการสำหรับการแก้ปัญหาของฉัน:

$('select option:nth-child(1)').prop("selected", true).change();

ดูหมายเหตุ. prop () ในเอกสารที่นี่: http://api.jquery.com/prop/


2

นี่คือวิธีง่ายๆjavascriptที่ใช้ได้ในกรณีส่วนใหญ่:

document.getElementById("selectId").selectedIndex = "0";

1

หากคุณต้องการตรวจสอบข้อความของตัวเลือกที่เลือกโดยไม่คำนึงว่าเป็นลูกคนแรกหรือไม่

var a = $("#select_id option:selected").text();
alert(a); //check if the value is correct.
if(a == "value") {-- execute code --}

บันทึกการค้นหาครั้งที่สองให้ฉัน นี่เป็นสิ่งที่ฉันกำลังมองหาอยู่มากแม้ว่าฉันจะสนใจที่จะเปลี่ยนค่ามากกว่าการตรวจสอบ $('#myID option:selected').text('NEW STRING');
Ricky Payne

1
    var arr_select_val=[];

    $("select").each(function() { 
        var name=this.name;
            arr_select_val[name]=$('select option:first-child').val();
    });


// Process the array object
     $('.orders_status_summary_div').print(arr_select_val);
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.