ตั้งค่าตัวเลือกที่เลือกของกล่องที่เลือก


352

ฉันต้องการตั้งค่าตัวเลือกที่เลือกไว้ก่อนหน้านี้เพื่อแสดงในการโหลดหน้า ฉันลองด้วยรหัสต่อไปนี้:

$("#gate").val('Gateway 2');

กับ

<select id="gate">
    <option value='null'>- choose -</option>
    <option value='gateway_1'>Gateway 1</option>
    <option value='gateway_2'>Gateway 2</option>
</select>

แต่มันไม่ทำงาน ความคิดใด ๆ


10
ที่จริงแล้วมันควรจะทำงานอย่างไรคุณแน่ใจว่าคุณตั้งค่าใน document.ready ()? อาจจะใช้รหัสได้เมื่อกล่องเลือกยังไม่พร้อม
Morph

คำตอบ:


495

สิ่งนี้น่าจะใช้ได้ นี่คือการสาธิต ตรวจสอบให้แน่ใจว่าคุณได้วางรหัสของคุณใน$(document).ready:

$(function() {
    $("#gate").val('gateway_2');
});

4
ตกลงเมื่อฉันเลื่อนลงรายการมันจะถูกเน้น แต่ไม่ปรากฏเป็นองค์ประกอบแรกในรายการ
โหวต

2
อ่าฉันประกาศว่ามันไม่ได้อยู่ในฟังก์ชั่นพร้อมเอกสาร ... ขอบคุณ!
โหวต

7
ไม่ดีเท่ากับการตั้งค่าแอตทริบิวต์ "selected" เป็น "selected"
Adal

6
@Adal เหตุใดจึงไม่ดีเท่ากับการตั้งค่าแอตทริบิวต์ 'ที่เลือก' เป็น 'เลือก'
Shawn

26
ในกรณีที่คนอื่นสงสัยการ'Gateway 2'ส่งผ่านไปยังฟังก์ชันvalตรงกับค่าของvalueคุณลักษณะของตัวเลือกที่เลือกไม่ใช่ข้อความ ดูJSFiddle นี้ซึ่งเป็นเวอร์ชั่นตัวอย่างที่ได้รับการแก้ไขอย่างอ่อนโยนของดารินเพื่อเป็นตัวอย่างของสิ่งที่ฉันหมายถึง
Kenny Evitt

166
$(document).ready(function() {
    $("#gate option[value='Gateway 2']").prop('selected', true);
    // you need to specify id of combo to set right combo, if more than one combo
});

37

$('#gate').val('Gateway 2').prop('selected', true);


2
คล้ายกันมากกับ$('#your-select-box-id :nth-child(2)').prop('selected', true)สิ่งที่ใช้งานได้ด้วยการอัพเดตแบบหล่นของกล่อง
Big Rich

มีเพียงอันเดียวที่เหมาะกับฉัน สงสัยเพราะฉันใช้ไลบรารี่ที่เลือกเอง
Louis M.

15

ฉันพบว่าใช้วิธี jQuery .val () เพื่อให้มีข้อเสียเปรียบที่สำคัญ

<select id="gate"></select>
$("#gate").val("Gateway 2");

หากกล่องตัวเลือกนี้ (หรือวัตถุอินพุตอื่น ๆ ) อยู่ในรูปแบบและมีปุ่มรีเซ็ตที่ใช้ในแบบฟอร์มเมื่อคลิกปุ่มรีเซ็ตค่าการตั้งค่าจะได้รับการล้างและไม่รีเซ็ตเป็นค่าเริ่มต้นตามที่คุณคาดหวัง

ดูเหมือนว่าจะทำงานได้ดีที่สุดสำหรับฉัน

สำหรับเลือกกล่อง

<select id="gate"></select>
$("#gate option[value='Gateway 2']").attr("selected", true);

สำหรับการป้อนข้อความ

<input type="text" id="gate" />
$("#gate").attr("value", "your desired value")

สำหรับอินพุต textarea

<textarea id="gate"></textarea>
$("#gate").html("your desired value")

สำหรับช่องทำเครื่องหมาย

<input type="checkbox" id="gate" />
$("#gate option[value='Gateway 2']").attr("checked", true);

สำหรับปุ่มกด

<input type="radio" id="gate" value="this"/> or <input type="radio" id="gate" value="that"/>
$("#gate[value='this']").attr("checked", true);

12
  $("#form-field").val("5").trigger("change");

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

6

มันใช้งานได้ดี ดูซอนี้: http://jsfiddle.net/kveAL/

เป็นไปได้หรือไม่ที่คุณต้องประกาศ jQuery ของคุณใน$(document).ready()ตัวจัดการ?

นอกจากนี้คุณอาจมีสององค์ประกอบที่มี ID เหมือนกันหรือไม่



6

ผมมีปัญหาเดียวกัน.

โซลูชัน: เพิ่มการรีเฟรช

$("#gate").val('Gateway 2');
$("#gate").selectmenu('refresh');

3
นี่สำหรับ jqueryui selectmenu ไม่ใช่ html มาตรฐานเท่านั้น
stuartdotnet

3

ฉันรู้ว่ามีคำตอบซ้ำหลายครั้ง แต่ตอนนี้ไม่ต้องการ jQuery หรือไลบรารี่ภายนอกอื่น ๆ และสามารถทำได้ง่ายๆ

document.querySelector("#gate option[value='Gateway 2']").setAttribute('selected',true);
<select id="gate">
    <option value='null'>- choose -</option>
    <option value='Gateway 1'>Gateway 1</option>
    <option value='Gateway 2'>Gateway 2</option>
</select>


ทางออกที่ดี แต่ดูเหมือนว่าจะไม่ลบแอตทริบิวต์ที่เลือกออกจากตัวเลือกที่เลือกไว้ก่อนหน้านี้
ระบบ


1

ปัญหาของฉัน

get_courses(); //// To load the course list
$("#course").val(course); //// Setting default value of the list

ฉันมีปัญหาเดียวกัน ข้อแตกต่างจากรหัสของคุณคือฉันโหลดกล่องเลือกผ่านการโทร ajax และในไม่ช้าเมื่อมีการดำเนินการโทร ajax ฉันได้ตั้งค่าเริ่มต้นของกล่องที่เลือกไว้

การแก้ไขปัญหา

get_courses();
   setTimeout(function() {
     $("#course").val(course);
  }, 10);

1
คุณวิเคราะห์ปัญหาให้ถูกต้อง แต่วิธีแก้ไขนั้นไม่ดีและเปราะบาง คุณต้องใช้ฟังก์ชั่นการโทรกลับที่แนบมากับอาแจ็กซ์โทรของคุณ
icksde

-1

ฉันมีปัญหาที่ไม่ได้ตั้งค่าเนื่องจากข้อผิดพลาดทางไวยากรณ์ก่อนการโทร

$("#someId").value(33); //script bailed here without showing any errors Note: .value instead of .val
$("#gate").val('Gateway 2'); //this line didn't work.

ตรวจสอบข้อผิดพลาดทางไวยากรณ์ก่อนการโทร


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


-2
// Make option have a "selected" attribute using jQuery

var yourValue = "Gateway 2";

$("#gate").find('option').each(function( i, opt ) {
    if( opt.value === yourValue ) 
        $(opt).attr('selected', 'selected');
});

1
สิ่งนี้จะวนซ้ำแม้กระทั่งค่าที่เลือกซึ่งไม่มีประสิทธิภาพ
Daniel Nuriyev

บวก.attr()เป็นวิธีที่ผิดในการทำเช่นนี้ตั้งแต่ก่อนที่จะโพสต์คำตอบนี้
Auspex

-2

เพิ่มเติมจาก @icksde และ @Korah (ขอบคุณทั้งคู่!)

เมื่อสร้างตัวเลือกด้วย AJAXเอกสารอาจถูกเรียกใช้ก่อนที่จะสร้างรายการดังนั้น

มันใช้งานไม่ได้

$(document).ready(function() {
    $("#gate").val('Gateway 2');
});

สิ่งนี้ทำ

หมดเวลาใช้งานได้ แต่ @icksde บอกว่ามันบอบบาง (จริง ๆ แล้วฉันต้องการ 20ms แทน 10ms) จะดีกว่าเพื่อให้พอดีกับฟังก์ชั่น AJAX เช่นนี้:

$("#someObject").change(function() {
    $.get("website/page.php", {parameters}, function(data) {
        $("#gate").append("<option value='Gateway 2'">" + "Gateway 2" + "</option>");
        $("#gate").val('Gateway 2');
    }, "json");
});
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.