คุณจะลบตัวเลือกทั้งหมดของกล่องที่เลือกแล้วเพิ่มหนึ่งตัวเลือกและเลือกด้วย jQuery ได้อย่างไร


1077

ใช้ core jQuery คุณจะลบตัวเลือกทั้งหมดของกล่องที่เลือกได้อย่างไรจากนั้นเพิ่มหนึ่งตัวเลือกและเลือกได้อย่างไร

กล่องที่ฉันเลือกมีดังต่อไปนี้

<Select id="mySelect" size="9"> </Select>

แก้ไข: รหัสต่อไปนี้เป็นประโยชน์กับการผูกมัด อย่างไรก็ตาม (ใน Internet Explorer) .val('whatever')ไม่ได้เลือกตัวเลือกที่ถูกเพิ่ม (ฉันใช้ 'ค่า' เดียวกันทั้งใน.appendและ.val)

$('#mySelect').find('option').remove().end()
.append('<option value="whatever">text</option>').val('whatever');

แก้ไข: พยายามให้มันเลียนแบบรหัสนี้ฉันใช้รหัสต่อไปนี้ทุกครั้งที่มีการรีเซ็ตหน้า / แบบฟอร์ม กล่องที่เลือกนี้บรรจุด้วยปุ่มตัวเลือก .focus()ได้ใกล้ชิด .selected= "true"แต่ตัวเลือกที่ไม่ปรากฏที่เลือกเหมือนมันจะมี ไม่มีอะไรผิดปกติกับรหัสที่มีอยู่ของฉัน - ฉันแค่พยายามเรียนรู้ jQuery

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

แก้ไข: คำตอบที่เลือกอยู่ใกล้กับสิ่งที่ฉันต้องการ สิ่งนี้ใช้ได้กับฉัน:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

แต่คำตอบทั้งสองทำให้ฉันไปสู่ทางออกสุดท้ายของฉัน ..

คำตอบ:


1695
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

3
@nickf: ฉันมีปัญหาเดียวกัน แต่ฉันต้องเพิ่มชุดของช่องทำเครื่องหมายมากกว่าหนึ่งในการเปลี่ยนแบบเลื่อนลง แต่ช่องทำเครื่องหมายของฉันมาจาก xml สิ่งนี้ใช้ไม่ได้
defau1t

10
โปรดทราบว่าคุณสามารถแยกตัวเลือก / attr / ข้อความเช่น:.append($("<option></option>").attr("value", '123').text('ABC!')
Brock Hensley

1
@BrockHensley ฉันเชื่อว่าความสง่างามที่แท้จริงของคำตอบนี้คือการผูกมัดที่เหมาะสมในคำสั่งผสมกับฟังก์ชั่นการสิ้นสุด () ข้อเสนอแนะของคุณจะทำงานเช่นกัน จาก jQuery API Documentation: "วิธีการสำรวจเส้นทาง DOM ของ jQuery ส่วนใหญ่ทำงานบนอินสแตนซ์วัตถุ jQuery และสร้างขึ้นใหม่โดยจับคู่ชุดองค์ประกอบ DOM ที่แตกต่างกันเมื่อเกิดเหตุการณ์นี้มันจะเหมือนกับว่าชุดองค์ประกอบใหม่ถูกผลักลงบนสแต็ก ที่ถูกเก็บรักษาไว้ภายในวัตถุแต่ละวิธีการกรองที่ต่อเนื่องจะผลักชุดองค์ประกอบใหม่ลงบนสแต็กหากเราต้องการชุดองค์ประกอบที่เก่ากว่าเราสามารถใช้ end () เพื่อป๊อปชุดกลับออกจากกองซ้อน "
Anthony Mason

1
นี่เป็นวิธีเดียวที่ฉันสามารถสร้างเมนูของฉันใหม่และเปลี่ยนตัวเลือกที่เลือกใน jQuery Mobile บน PhoneGap สำหรับ iOS จำเป็นต้องรีเฟรชเมนูหลังจากนั้น
xited

3
@BrockHensley คุณสามารถไปได้ไกลถึง.append($("<option></option>", {'value':'123'}).text('ABC!')
vahanpwns

710
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

34
เพิ่งออกมาจากความอยากรู้เป็น 'ว่างเปล่า' เร็วกว่า 'ค้นหา'? ดูเหมือนว่าจะเป็น - เพราะ 'การค้นหา' จะใช้ตัวเลือกและ 'ว่างเปล่า' ก็จะทำให้องค์ประกอบนั้นว่างเปล่า
Dan Esparza

52
@DanEsparza ฉันทำให้คุณเป็น jsperf; empty()เปิดใช้งานได้เร็วขึ้นแน่นอน;) jsperf.com/find-remove-vs-empty
vzwick

ฉันมีข้อผิดพลาดแปลก ๆ ด้วยวิธีนี้ ส่วนที่เติมของมันก็โอเค แต่เมื่อฉันพยายามเลือกค่า (ในกรณีของฉันวัน) ฉันสามารถคอนโซลบันทึกค่า แต่ค่าที่แสดงในเขตข้อมูลที่เลือกอยู่ในค่าแรก .... ฉันสามารถ ไม่สามารถแก้ไขได้: /
Takács Zsolt

5
@ TakácsZsoltบางทีคุณควรเพิ่ม a .val('whatever')ท้ายเครือด้วยคำตอบของ Matt
Kodos Johnson

.empty () ทำงานกับวัตถุเป็นจริงในขณะที่. remove () ไม่ทำงาน
OverlordvI

127

ทำไมไม่ใช้แค่จาวาสคริปต์ธรรมดา?

document.getElementById("selectID").options.length = 0;

7
ผมเห็นว่านี่เป็นทางออกที่ง่ายที่สุดสำหรับการลบตัวเลือกทั้งหมด แต่เพียงครึ่งหนึ่งของคำตอบคำถาม ...
Elezar

2
สิ่งนี้จะไม่สร้างการรั่วไหลของหน่วยความจำหรือไม่? ตอนนี้องค์ประกอบตัวเลือกไม่สามารถเข้าถึงได้ แต่ยังคงจัดสรรอยู่
Synetech

1
JS Old FTW ธรรมดา (สำหรับผู้ชนะ) !!! :)
raddevus

78

หากเป้าหมายของคุณคือการลบตัวเลือกทั้งหมดออกจากตัวเลือกยกเว้นตัวเลือกแรก (โดยทั่วไปคือตัวเลือก 'โปรดเลือกรายการ') คุณสามารถใช้:

$('#mySelect').find('option:not(:first)').remove();

10
นี่ควรเป็นคำตอบ คนอื่น ๆ ทั้งหมดจงใจลบครั้งแรกด้วยมุมมองของการสร้างใหม่ในภายหลังซึ่งฉันไม่ชอบ; มันก็หมายความว่าพวกเขาเก็บตัวเลือกแรกไว้ที่หนึ่งด้วย

76

ฉันมีข้อผิดพลาดใน IE7 (ใช้งานได้ดีใน IE6) ที่ใช้วิธีการ jQuery ข้างต้นจะล้างตัวเลือกใน DOM แต่ไม่ใช่บนหน้าจอ การใช้ IE Developer Toolbar ฉันสามารถยืนยันได้ว่ารายการที่เลือกถูกลบไปแล้วและมีรายการใหม่ แต่ภาพที่เลือกยังคงแสดงรายการเก่า - แม้ว่าคุณจะไม่สามารถเลือกได้

การแก้ไขคือการใช้วิธีการ DOM มาตรฐาน / คุณสมบัติ (ตามต้นฉบับมีโปสเตอร์) เพื่อล้างมากกว่า jQuery - ยังคงใช้ jQuery เพื่อเพิ่มตัวเลือก

$('#mySelect')[0].options.length = 0;

6
ฉันต้องใช้วิธีนี้ใน ie6 เช่นกันเพราะ. ว่างเปล่า () ทำให้กล่องที่ฉันเลือกซึ่งบรรจุในภาชนะที่ซ่อนอยู่ปรากฏให้เห็นแม้ในขณะที่ผู้ปกครองซ่อนอยู่
รหัสผู้บัญชาการ

2
วิธีนี้กลายเป็นเรื่องเล็กน้อยมากขึ้น (ประมาณ 1%) นักแสดง: jsperf.com/find-remove-vs-empty
vzwick

3
+1 นี่เป็นที่อ่านได้มากที่สุด (ในความคิดของฉัน) และในลิงก์ jsPerf (@vzwick ที่เชื่อมโยง) คำตอบที่ยอมรับคือ 34% ช้าลง (Opera 20)
Morvael

35

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

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

การตอบสนองต่อ "แก้ไข" : คุณสามารถอธิบายความหมายของคำว่า "กล่องที่เลือกนี้บรรจุด้วยปุ่มตัวเลือก" ได้หรือไม่? <select>องค์ประกอบไม่สามารถ (ตามกฎหมาย) ประกอบด้วย<input type="radio">องค์ประกอบ


27
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

2
เรายังคงใช้ IE6 อยู่และวิธีนี้ใช้ไม่ได้ อย่างไรก็ตามมันทำงานใน FF 3.5.6
Jay Corbett

3
อาจต้องเพิ่ม. change () ไปยังจุดสิ้นสุดเพื่อทริกเกอร์การเปลี่ยนแปลงการเลือก
Hayden Chambers


12

ขอบคุณคำตอบที่ฉันได้รับทำให้ฉันสามารถสร้างสิ่งต่อไปนี้ซึ่งเหมาะสมกับความต้องการของฉัน คำถามของฉันค่อนข้างคลุมเครือ ขอขอบคุณที่ติดตาม ปัญหาสุดท้ายของฉันได้รับการแก้ไขโดยรวม "เลือกไว้" ในตัวเลือกที่ฉันต้องการ

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>


8

ลองเปลี่ยน html เป็นข้อมูลใหม่

$('#mySelect').html('<option value="whatever">text</option>');

ตัวอย่างอื่น:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

8
  1. ล้างตัวเลือกที่มีอยู่ทั้งหมดก่อนดำเนินการตัวเลือกแรก (- เลือก -)

  2. ผนวกค่าตัวเลือกใหม่โดยใช้การวนซ้ำทีละรายการ

    $('#ddlCustomer').find('option:not(:first)').remove();
    for (var i = 0; i < oResult.length; i++) {
       $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
    }

7

ฉันได้พบกับสิ่งที่สุทธิด้านล่าง ด้วยตัวเลือกมากมายเช่นในสถานการณ์ของฉันนี้เร็วกว่า.empty()หรือ.find().remove()จาก jQuery

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

ข้อมูลเพิ่มเติมที่นี่



7
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

บรรทัดแรกของรหัสจะลบตัวเลือกทั้งหมดของกล่องที่เลือกเนื่องจากไม่มีการระบุเกณฑ์การค้นหาตัวเลือก

บรรทัดที่สองของรหัสจะเพิ่มตัวเลือกที่มีค่าที่ระบุ ("testValue") และข้อความ ("TestText")


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

6

จากคำตอบของ mauretto การอ่านและทำความเข้าใจง่ายขึ้น:

$('#mySelect').find('option').not(':first').remove();

หากต้องการลบตัวเลือกทั้งหมดยกเว้นตัวเลือกที่มีค่าเฉพาะคุณสามารถใช้สิ่งนี้:

$('#mySelect').find('option').not('[value=123]').remove();

สิ่งนี้จะดีกว่าถ้ามีตัวเลือกที่จะเพิ่มอยู่แล้ว


4

ใช้ jquery prop ()เพื่อล้างตัวเลือกที่เลือก

$('#mySelect option:selected').prop('selected', false);

1
.prop () มีผลบังคับใช้ใน jQuery 1.6+ เท่านั้น สำหรับ jQuery 1.5- ให้ใช้ .attr ()
Agi Hammerthief

4

สิ่งนี้จะแทนที่ mySelect ที่คุณมีอยู่ด้วย mySelect ใหม่

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');


4

เพียงหนึ่งบรรทัดเพื่อลบตัวเลือกทั้งหมดออกจากแท็กที่เลือกและหลังจากที่คุณสามารถเพิ่มตัวเลือกใด ๆ แล้วทำบรรทัดที่สองเพื่อเพิ่มตัวเลือก

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

2
  • บันทึกค่าตัวเลือกที่จะต่อท้ายในวัตถุ
  • ล้างตัวเลือกที่มีอยู่ในแท็กเลือก
  • วนซ้ำวัตถุรายการและผนวกเนื้อหาเข้ากับแท็กเลือกที่ต้องการ

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



1

หวังว่ามันจะทำงาน

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

ใช้งานได้ถ้ามีมากกว่านั้นตัวเลือก i ไม่สามารถเลือกอันที่สองได้
Anburaj_N

0
var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.