หากคุณรู้จักดัชนีค่าหรือข้อความ หากคุณไม่มี ID สำหรับการอ้างอิงโดยตรง

นี่คือสิ่งนี้และนี่คือคำตอบที่เป็นประโยชน์ทั้งหมด

ตัวอย่างมาร์กอัป

<div class="selDiv">
  <select class="opts">
    <option selected value="DEFAULT">Default</option>
    <option value="SEL1">Selection 1</option>
    <option value="SEL2">Selection 2</option>
  </select>
</div>

ตัวเลือกที่จะได้รับองค์ประกอบตัวเลือกกลางโดยค่าคือ

$('.selDiv option[value="SEL1"]')

สำหรับดัชนี:

$('.selDiv option:eq(1)')

สำหรับข้อความที่รู้จัก:

$('.selDiv option:contains("Selection 1")')

แก้ไข : ตามความเห็นข้างต้น OP อาจมีหลังจากเปลี่ยนรายการที่เลือกของรายการแบบเลื่อนลง ในรุ่น 1.6 และสูงกว่าแนะนำให้ใช้วิธี prop ():

$('.selDiv option:eq(1)').prop('selected', true)

ในรุ่นเก่ากว่า:

$('.selDiv option:eq(1)').attr('selected', 'selected')

แก้ไข 2 : หลังจากความคิดเห็นของไรอัน การจับคู่ใน "การเลือก 10" อาจไม่เป็นที่ต้องการ ฉันพบว่าไม่มีตัวเลือกให้ตรงกับข้อความเต็ม แต่ตัวกรองใช้งานได้:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3 : ใช้ความระมัดระวังด้วย$(e).text()เนื่องจากอาจมีการขึ้นบรรทัดใหม่ที่ทำให้การเปรียบเทียบล้มเหลว สิ่งนี้จะเกิดขึ้นเมื่อตัวเลือกถูกปิดโดยปริยาย (ไม่มี</option>แท็ก):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

หากคุณเพียงแค่ใช้e.textช่องว่างพิเศษเช่นบรรทัดใหม่ต่อท้ายจะถูกลบออกทำให้การเปรียบเทียบมีประสิทธิภาพยิ่งขึ้น

วิธีการข้างต้นไม่ได้ให้วิธีการแก้ปัญหาที่ฉันต้องการดังนั้นฉันจึงคิดว่าฉันจะให้สิ่งที่ได้ผลสำหรับฉัน

$('#element option[value="no"]').attr("selected", "selected");

คุณสามารถใช้val()วิธีการ:

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

โดยค่าสิ่งที่ทำงานได้สำหรับฉันกับjQuery 1.7คือรหัสด้านล่างลองนี้:

$('#id option[value=theOptionValue]').prop('selected', 'selected').change();

มีหลายวิธีในการทำเช่นนี้ แต่วิธีการที่สะอาดที่สุดได้หายไปในบรรดาคำตอบยอดนิยมและข้อโต้แย้งval()มากมาย นอกจากนี้วิธีการบางอย่างเปลี่ยนไปเมื่อวันที่ jQuery 1.6 ดังนั้นจึงจำเป็นต้องมีการอัพเดท

สำหรับตัวอย่างต่อไปนี้ฉันจะถือว่าตัวแปร$selectเป็นวัตถุ jQuery ชี้ไปที่<select>แท็กที่ต้องการเช่นผ่านดังต่อไปนี้:

var $select = $('.selDiv .opts');

หมายเหตุ 1 - ใช้ val () สำหรับการจับคู่ค่า:

สำหรับการจับคู่ค่าการใช้val()นั้นง่ายกว่าการใช้ตัวเลือกคุณลักษณะ: https://jsfiddle.net/yz7tu49b/6/

$select.val("SEL2");

เวอร์ชัน setter ของ.val()ถูกนำไปใช้กับselectแท็กโดยการตั้งค่าselectedคุณสมบัติของการจับคู่optionด้วยเหมือนกันvalueดังนั้นจึงใช้ได้ดีกับเบราว์เซอร์สมัยใหม่ทั้งหมด

หมายเหตุ 2 - ใช้ prop ('ถูกเลือก', จริง):

หากคุณต้องการตั้งค่าสถานะที่เลือกไว้ของตัวเลือกโดยตรงคุณสามารถใช้prop(ไม่attr) กับbooleanพารามิเตอร์ (แทนที่จะเป็นค่าข้อความselected ):

เช่นhttps://jsfiddle.net/yz7tu49b/

$option.prop('selected', true);  // Will add selected="selected" to the tag

หมายเหตุ 3 - อนุญาตสำหรับค่าที่ไม่รู้จัก:

หากคุณใช้val()เพื่อเลือก<option>แต่ไม่ตรงกับวาล (อาจเกิดขึ้นขึ้นอยู่กับแหล่งที่มาของค่า) จากนั้นเลือก "ไม่มีอะไร" และ$select.val()จะกลับมาnullจะกลับมา

ดังนั้นสำหรับตัวอย่างที่แสดงและเพื่อความทนทานคุณสามารถใช้สิ่งนี้https://jsfiddle.net/1250Ldqn/ :

var $select = $('.selDiv .opts');
$select.val("SEL2");
if ($select.val() == null) {
  $select.val("DEFAULT");
}

หมายเหตุ 4 - การจับคู่ข้อความที่แน่นอน:

หากคุณต้องการจับคู่ด้วยข้อความที่แน่นอนคุณสามารถใช้filterฟังก์ชั่นด้วย เช่นhttps://jsfiddle.net/yz7tu49b/2/ :

var $select = $('.selDiv .opts');
$select.children().filter(function(){
    return this.text == "Selection 2";
}).prop('selected', true);

แม้ว่าคุณจะมีพื้นที่ว่างเป็นพิเศษคุณอาจต้องการเพิ่มเล็มในการเช็คอิน

    return $.trim(this.text) == "some value to match";

หมายเหตุ 5 - จับคู่ตามดัชนี

หากคุณต้องการจับคู่โดยดัชนีเพียงดัชนีเด็ก ๆ ของการเลือกเช่นhttps://jsfiddle.net/yz7tu49b/3/

var $select = $('.selDiv .opts');
var index = 2;
$select.children()[index].selected = true;

แม้ว่าฉันมักจะหลีกเลี่ยงคุณสมบัติ DOM โดยตรงในความโปรดปรานของ jQuery ทุกวันนี้ไปยังโค้ดที่มีการพิสูจน์ในอนาคตดังนั้นจึงสามารถทำได้เช่นกันที่https://jsfiddle.net/yz7tu49b/5/ :

var $select = $('.selDiv .opts');
var index = 2;
$select.children().eq(index).prop('selected', true);

หมายเหตุ 6 - ใช้การเปลี่ยนแปลง () เพื่อเริ่มการเลือกใหม่

ในทุกกรณีข้างต้นเหตุการณ์การเปลี่ยนแปลงจะไม่เริ่มทำงาน นี่คือการออกแบบโดยที่คุณจะไม่ต้องปิดท้ายด้วยกิจกรรมการเปลี่ยนแปลงซ้ำ

เพื่อสร้างเหตุการณ์การเปลี่ยนแปลงหากจำเป็นเพียงแค่เพิ่มการเรียกไป.change()ยังselectวัตถุjQuery เช่นตัวอย่างที่ง่ายที่สุดแรกจะกลายเป็นhttps://jsfiddle.net/yz7tu49b/7/

var $select = $('.selDiv .opts');
$select.val("SEL2").change();

นอกจากนี้ยังมีวิธีอื่นอีกมากมายในการค้นหาองค์ประกอบโดยใช้ตัวเลือกคุณลักษณะเช่น[value="SEL2"]แต่คุณต้องจำไว้ว่าตัวเลือกคุณลักษณะนั้นค่อนข้างช้าเมื่อเทียบกับตัวเลือกอื่น ๆ เหล่านี้

คุณสามารถตั้งชื่อตัวเลือกและใช้สิ่งนี้:

$("select[name='theNameYouChose']").find("option[value='theValueYouWantSelected']").attr("selected",true);

ควรเลือกตัวเลือกที่คุณต้องการ

   $(elem).find('option[value="' + value + '"]').attr("selected", "selected");

ตอบคำถามของฉันเพื่อรับเอกสาร ฉันแน่ใจว่ามีวิธีอื่นในการทำสิ่งนี้ให้สำเร็จ แต่งานนี้และรหัสนี้ได้รับการทดสอบแล้ว

<html>
<head>
<script language="Javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/JavaScript">

$(function() {
    $(".update").bind("click",      // bind the click event to a div
        function() {
            var selectOption = $('.selDiv').children('.opts') ;
            var _this = $(this).next().children(".opts") ;

            $(selectOption).find("option[index='0']").attr("selected","selected");
//          $(selectOption).find("option[value='DEFAULT']").attr("selected","selected");
//          $(selectOption).find("option[text='Default']").attr("selected","selected");


//          $(_this).find("option[value='DEFAULT']").attr("selected","selected");
//          $(_this).find("option[text='Default']").attr("selected","selected");
//          $(_this).find("option[index='0']").attr("selected","selected");

    }); // END Bind
}); // End eventlistener

</script>
</head>
<body>
<div class="update" style="height:50px; color:blue; cursor:pointer;">Update</div>
<div class="selDiv">
        <select class="opts">
            <option selected value="DEFAULT">Default</option>
            <option value="SEL1">Selection 1</option>
            <option value="SEL2">Selection 2</option>
        </select>
    </div>
</body>
</html>

จะใช้วิธีนี้ได้ตามวิธีด้านล่างนี้

สำหรับตัวเลือกการเลือกปกติ

<script>    
    $(document).ready(function() {
    $("#id").val('select value here');
       });
        </script>

สำหรับตัวเลือกทริกเกอร์ตัวเลือก 2 ตัวเลือกจำเป็นต้องใช้

<script>    
        $(document).ready(function() {
        $("#id").val('select value here').trigger('change');
           });
            </script>

เมื่อใช้jquery-2.1.4ฉันพบคำตอบต่อไปนี้สำหรับฉัน:

$('#MySelectionBox').val(123).change();

หากคุณมีค่าสตริงลองต่อไปนี้:

$('#MySelectionBox').val("extra thing").change();

ตัวอย่างอื่นไม่ได้ผลสำหรับฉันดังนั้นฉันจึงเพิ่มคำตอบนี้

ฉันพบคำตอบดั้งเดิมได้ที่: https://forum.jquery.com/topic/how-to-dynamically-select-option-in-dropdown-menu

สำหรับการตั้งค่าการเลือกด้วยการเลือกทริกเกอร์:

$('select.opts').val('SEL1').change();

สำหรับการตั้งค่าตัวเลือกจากขอบเขต:

$('.selDiv option[value="SEL1"]')
    .attr('selected', 'selected')
    .change();

attr()ใช้รหัสนี้เลือกที่จะหาเลือกวัตถุที่มีสภาพแล้วเปลี่ยนแอตทริบิวต์ที่เลือกโดยการ

ยิ่งกว่านั้นฉันขอแนะนำให้เพิ่มchange()กิจกรรมหลังจากการตั้งค่าคุณลักษณะselectedโดยการทำเช่นนี้รหัสจะใกล้เคียงกับการเปลี่ยนการเลือกโดยผู้ใช้

ฉันใช้สิ่งนี้เมื่อฉันรู้ดัชนีของรายการ

$("#yourlist :nth(1)").prop("selected","selected").change();

สิ่งนี้อนุญาตให้รายการเปลี่ยนแปลงและเริ่มเหตุการณ์การเปลี่ยนแปลง ": nth (n)" นับจากดัชนี 0

ฉันจะไปกับ: -

$("select#my-select option") .each(function() { this.selected = (this.text == myVal); });

ลองสิ่งนี้

คุณเพียงแค่ใช้ ID ฟิลด์เลือกแทน #id (เช่น # select_name)

แทนค่าตัวเลือกใช้ตัวเลือกของคุณเลือกค่า

 <script>
    $(document).ready(function() {
$("#id option[value='option value']").attr('selected',true);
   });
    </script>

สำหรับ Jquery ที่เลือกถ้าคุณส่งแอททริบิวไปยังฟังก์ชั่นและจำเป็นต้องอัพเดทตัวเลือก

$('#yourElement option[value="'+yourValue+'"]').attr('selected', 'selected');
$('#editLocationCity').chosen().change();
$('#editLocationCity').trigger('liszt:updated');

/* This will reset your select box with "-- Please Select --"   */ 
    <script>
    $(document).ready(function() {
        $("#gate option[value='']").prop('selected', true);
    });
    </script>

$('select').val('the_value');ลักษณะทางออกที่เหมาะสมและถ้าคุณมีแถวของตารางข้อมูลแล้ว:

$row.find('#component').val('All');

หากคุณไม่ต้องการใช้ jQuery คุณสามารถใช้โค้ดด้านล่าง:

document.getElementById("mySelect").selectedIndex = "2";

ขอบคุณสำหรับคำถาม หวังว่ารหัสนี้จะเหมาะกับคุณ

var val = $("select.opts:visible option:selected ").val();

$('#select option[data-id-estado="3"]').prop("selected",true).trigger("change");

หรือ

$('#select option[value="myValue"]').prop("selected",true).trigger("change");