ฉันมีกล่องที่เลือก:

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
  <option value="3">Number 3</option>
  <option value="4">Number 4</option>
  <option value="5">Number 5</option>
  <option value="6">Number 6</option>
  <option value="7">Number 7</option>
</select>

ฉันต้องการตั้งค่าตัวเลือกอย่างใดอย่างหนึ่งเป็น "เลือก" ตามดัชนีที่เลือก

ตัวอย่างเช่นหากฉันพยายามตั้งค่า "หมายเลข 3" ฉันจะลองทำดังนี้:

$('#selectBox')[3].attr('selected', 'selected');

แต่มันไม่ได้ผล ฉันจะตั้งค่าตัวเลือกตามที่เลือกโดยใช้ดัชนีเป็น jQuery ได้อย่างไร

ขอบคุณ!

หมายเหตุ : คำตอบขึ้นอยู่กับ jQuery 1.6.1+

$('#selectBox :nth-child(4)').prop('selected', true); // To select via index
$('#selectBox option:eq(3)').prop('selected', true);  // To select via value

ขอบคุณสำหรับความคิดเห็น.getไม่สามารถใช้งานได้เนื่องจากจะส่งคืนองค์ประกอบ DOM ไม่ใช่ jQuery โปรดจำไว้ว่า.eqฟังก์ชั่นนี้สามารถใช้งานนอกตัวเลือกได้เช่นกันหากคุณต้องการ

$('#selectBox option').eq(3).prop('selected', true);

นอกจากนี้คุณยังสามารถสั้น / อ่านง่ายขึ้นหากคุณต้องการใช้ค่าแทนที่จะพึ่งพาการเลือกดัชนีเฉพาะ:

$("#selectBox").val("3");

หมายเหตุ: .val(3)ทำงานได้ดีสำหรับตัวอย่างนี้ แต่ค่าที่ไม่ใช่ตัวเลขต้องเป็นสตริงดังนั้นฉันจึงเลือกสตริงเพื่อความสอดคล้อง
(เช่น<option value="hello">Number3</option>คุณต้องใช้.val("hello"))

สิ่งนี้อาจเป็นประโยชน์ดังนั้นฉันคิดว่าฉันจะเพิ่มที่นี่

หากคุณต้องการเลือกค่าตามมูลค่าของรายการไม่ใช่ดัชนีของรายการนั้นคุณสามารถทำสิ่งต่อไปนี้:

รายการที่คุณเลือก:

<select id="selectBox">
    <option value="A">Number 0</option>
    <option value="B">Number 1</option>
    <option value="C">Number 2</option>
    <option value="D">Number 3</option>
    <option value="E">Number 4</option>
    <option value="F">Number 5</option>
    <option value="G">Number 6</option>
    <option value="H">Number 7</option>
</select>

jquery:

$('#selectBox option[value=C]').attr('selected', 'selected');

$('#selectBox option[value=C]').prop('selected', true);

รายการที่เลือกจะเป็น "หมายเลข 2" ทันที

ลองใช้สิ่งนี้แทน:

$("#selectBox").val(3);

ง่ายยิ่งขึ้น:

$('#selectBox option')[3].selected = true;

# Set element with index
$("#select option:eq(2)").attr("selected", "selected");

# Set element by text
$("#select").val("option Text").attr("selected", "selected");

เมื่อคุณต้องการเลือกด้วยวิธีอันดับต้น ๆ สำหรับการเลือกการตั้งค่าคุณสามารถใช้
$('#select option').removeAttr('selected');สำหรับการลบการเลือกก่อนหน้า

# Set element by value
$("#select").val("2");

# Get selected text
$("#select").children("option:selected").text();  # use attr() for get attributes
$("#select option:selected").text(); # use attr() for get attributes 

# Get selected value
$("#select option:selected").val();
$("#select").children("option:selected").val();
$("#select option:selected").prevAll().size();
$("option:selected",this).val();

# Get selected index
$("#select option:selected").index();
$("#select option").index($("#select option:selected"));

# Select First Option
$("#select option:first");

# Select Last Item
$("#select option:last").remove();


# Replace item with new one
$("#select option:eq(1)").replaceWith("<option value='2'>new option</option>");

# Remove an item
$("#select option:eq(0)").remove();

สิ่งสำคัญที่ต้องเข้าใจคือval()สำหรับselectองค์ประกอบส่งคืนค่าของตัวเลือกที่เลือก แต่ไม่ใช่จำนวนองค์ประกอบเช่นเดียวกับselectedIndexใน javascript

ในการเลือกตัวเลือกด้วยvalue="7"คุณสามารถใช้:

$('#selectBox').val(7); //this will select the option with value 7.

ในการยกเลิกการเลือกตัวเลือกให้ใช้อาร์เรย์ที่ว่างเปล่า:

$('#selectBox').val([]); //this is the best way to deselect the options

และแน่นอนคุณสามารถเลือกได้หลายตัวเลือก *:

$('#selectBox').val([1,4,7]); //will select options with values 1,4 and 7

* อย่างไรก็ตามในการเลือกหลายตัวเลือก<select>องค์ประกอบของคุณจะต้องมีMULTIPLEแอตทริบิวต์มิฉะนั้นจะใช้งานไม่ได้

ฉันเคยมีปัญหากับเสา ('เลือก') สิ่งต่อไปนี้ใช้ได้สำหรับฉันเสมอ:

//first remove the current value
$("#selectBox").children().removeAttr("selected");
$("#selectBox").children().eq(index).attr('selected', 'selected');

ลองสิ่งนี้:

$('select#mySelect').prop('selectedIndex', optionIndex);

ในที่สุดทริกเกอร์เหตุการณ์. change:

$('select#mySelect').prop('selectedIndex', optionIndex).change();

หวังว่านี่จะช่วยได้เช่นกัน

$('#selectBox option[value="3"]').attr('selected', true);

เลือกตัวเลือกที่ 3

$('#selectBox').val($('#selectBox option').eq(2).val());

ตัวอย่างบน jsfiddle

หมายเหตุ:

$('#selectBox option')[3].attr('selected', 'selected') 

ไม่ถูกต้องอาร์เรย์ deference ทำให้คุณได้รับวัตถุ dom ไม่ใช่วัตถุ jquery ดังนั้นมันจะล้มเหลวด้วย TypeError เช่นใน FF ด้วย: "$ ('# selectBox options') [3] .attr () ไม่ใช่ฟังก์ชัน ."

เพื่อชี้แจงคำตอบของ Marc และ John Kugelman คุณสามารถใช้:

$('#selectBox option').eq(3).attr('selected', 'selected')

get() จะไม่ทำงานหากใช้ตามวิธีที่ระบุไว้เพราะได้รับวัตถุ DOM ไม่ใช่วัตถุ jQuery ดังนั้นการแก้ปัญหาต่อไปนี้จะไม่ทำงาน:

$('#selectBox option').get(3).attr('selected', 'selected')

eq()รับตัวกรองชุด jQuery เป็นองค์ประกอบของดัชนีที่ระบุ $($('#selectBox option').get(3))มันเป็นที่ชัดเจนกว่า มันไม่ใช่สิ่งที่มีประสิทธิภาพ $($('#selectBox option')[3])มีประสิทธิภาพมากขึ้น (ดูกรณีทดสอบ )

คุณไม่จำเป็นต้องใช้วัตถุ jQuery จริงๆ นี่จะเป็นการหลอกลวง:

$('#selectBox option')[3].selected = true;

http://api.jquery.com/get/

http://api.jquery.com/eq/

อีกหนึ่งจุดสำคัญอย่างสำคัญยิ่ง:

แอตทริบิวต์ "selected" ไม่ใช่วิธีที่คุณระบุปุ่มตัวเลือก (ใน Firefox และ Chrome อย่างน้อย) ใช้แอตทริบิวต์ "checked":

$('#selectBox option')[3].checked = true;

กันไปสำหรับกล่องกาเครื่องหมาย

ใน 1.4.4 คุณได้รับข้อผิดพลาด: $ ("# selectBox option") [3] .attr ไม่ใช่ฟังก์ชั่น

งานนี้: $('#name option:eq(idx)').attr('selected', true);

#nameเลือก id อยู่ที่ไหนและidxเป็นค่าตัวเลือกที่คุณต้องการเลือก

แอตทริบิวต์จาวาสคริปต์ pure ที่เลือกไว้เป็นวิธีที่ถูกต้องเพราะเป็นจาวาสคริปต์ที่บริสุทธิ์และทำงานข้ามเบราว์เซอร์:

$('#selectBox')[0].selectedIndex=4;

นี่คือตัวอย่าง jsfiddle ที่มีสองดรอปดาวน์โดยใช้หนึ่งเพื่อตั้งค่าอื่น ๆ :

<select onchange="$('#selectBox')[0].selectedIndex=this.selectedIndex">
  <option>0</option>
  <option>1</option>
  <option>2</option>
</select>

<select id="selectBox">
  <option value="0">Number 0</option>
  <option value="1">Number 1</option>
  <option value="2">Number 2</option>
</select>

นอกจากนี้คุณยังสามารถเรียกสิ่งนี้ได้ก่อนที่จะเปลี่ยน selectedIndex หากสิ่งที่คุณต้องการคือแอตทริบิวต์ "select" บนแท็กตัวเลือก ( นี่คือซอ ):

$('#selectBox option').removeAttr('selected')
   .eq(this.selectedIndex).attr('selected','selected');

//funcion para seleccionar por el text del select
var text = '';
var canal = ($("#name_canal").val()).split(' ');
$('#id_empresa option').each(function(i, option) {
        text = $('#id_empresa option:eq('+i+')').text();
        if(text.toLowerCase() == canal[0].toLowerCase()){
            $('#id_empresa option:eq('+i+')').attr('selected', true);
        }
    });

ฉันมักจะใช้ทริกเกอร์ ('เปลี่ยน') เพื่อให้มันทำงาน

$('#selectBox option:eq(position_index)').prop('selected', true).trigger('change');

ตัวอย่างที่มี id select = selectA1 และ position_index = 0 (ตัวเลือกเฟิร์สต์ใน select):

$('#selectA1 option:eq(0)').prop('selected', true).trigger('change');

$('#selectBox option').get(3).attr('selected', 'selected')

เมื่อใช้ข้างต้นฉันยังคงได้รับข้อผิดพลาดใน webkit (Chrome) ว่า

"Uncaught TypeError: Object # ไม่มีเมธอด 'attr'"

ไวยากรณ์นี้หยุดข้อผิดพลาดเหล่านั้น

$($('#selectBox  option').get(3)).attr('selected', 'selected');

เลือกรายการตามค่าในรายการเลือก (โดยเฉพาะอย่างยิ่งถ้าค่าตัวเลือกมีช่องว่างหรืออักขระแปลก ๆ ) โดยทำสิ่งนี้:

$("#SelectList option").each(function () {
    if ($(this).val() == "1:00 PM")
        $(this).attr('selected', 'selected');
});

นอกจากนี้หากคุณมีเมนูแบบเลื่อนลง (ตรงข้ามกับตัวเลือกแบบหลายรายการ) คุณอาจต้องการทำเช่นbreak;นั้นคุณจะไม่ได้รับการพบว่ามีค่าแรกถูกเขียนทับ

ฉันต้องการโซลูชันที่ไม่มีค่าการเข้ารหัสยากในไฟล์ js; selectedIndexการใช้ โซลูชันที่ระบุส่วนใหญ่ไม่สามารถใช้เบราว์เซอร์เดียวได้ ดูเหมือนว่าจะทำงานใน FF10 และ IE8 (คนอื่นสามารถทดสอบในรุ่นอื่น)

$("#selectBox").get(0).selectedIndex = 1; 

หากคุณเพียงแค่ต้องการเลือกรายการที่ใช้คุณสมบัติเฉพาะของรายการตัวเลือก jQuery ประเภท [prop = val] จะได้รับรายการนั้น ตอนนี้ฉันไม่สนใจเกี่ยวกับดัชนีฉันแค่ต้องการไอเท็มตามค่าของมัน

$('#mySelect options[value=3]).attr('selected', 'selected');

ฉันประสบปัญหาเดียวกัน ก่อนอื่นคุณต้องผ่านเหตุการณ์ต่าง ๆ (เช่นเหตุการณ์ใดจะเกิดขึ้นก่อน)

ตัวอย่างเช่น:

เหตุการณ์แรก คือการสร้างเลือกกล่องที่มีตัวเลือก

เหตุการณ์ที่สองคือการเลือกตัวเลือกเริ่มต้นโดยใช้ฟังก์ชั่นใด ๆ เช่น Val () เป็นต้น

คุณควรตรวจสอบให้แน่ใจว่าเหตุการณ์ที่สองจะเกิดขึ้นหลังจากเหตุการณ์แรกเหตุการณ์ครั้งแรก

เพื่อให้บรรลุนี้ใช้สองฟังก์ชั่นสมมติว่าgenerateSelectbox () (สำหรับการสร้างกล่องเลือก) และselectDefaultOption ()

คุณต้องตรวจสอบให้แน่ใจว่าselectDefaultOption ()ควรถูกเรียกใช้หลังจากดำเนินการgenerateSelectbox () เท่านั้น

นอกจากนี้คุณยังสามารถเริ่มต้นได้หลายค่าหาก selectbox ของคุณเป็นทวีคูณ:

$('#selectBox').val(['A', 'B', 'C']);

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

รหัส:

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

      $(function(){
            $('#allcheck').click(function(){
             // $('#select_option').val([1,2,5]);also can use multi selectbox
              // $('#select_option').val(1);
               var selectoption=3;
           $("#selectBox>option[value="+selectoption+"]").attr('selected', 'selected');
    });

});

รหัส HTML:

   <select id="selectBox">
       <option value="0">Number 0</option>
       <option value="1">Number 1</option>
       <option value="2">Number 2</option>
       <option value="3">Number 3</option>
       <option value="4">Number 4</option>
       <option value="5">Number 5</option>
       <option value="6">Number 6</option>
       <option value="7">Number 7</option>
 </select> <br>
<strong>Select&nbsp;&nbsp; <a style="cursor:pointer;" id="allcheck">click for select option</a></strong>

ไม่นาน:

$("#selectBox").attr("selectedIndex",index)

โดยที่ index คือดัชนีที่เลือกเป็นจำนวนเต็ม