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


คำตอบ:


599

คุณสามารถลบตัวเลือกที่มีอยู่โดยใช้emptyวิธีการแล้วเพิ่มตัวเลือกใหม่ของคุณ:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

หากคุณมีตัวเลือกใหม่ในวัตถุคุณสามารถ:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

แก้ไข:สำหรับการลบตัวเลือกทั้งหมด แต่อย่างแรกคุณสามารถใช้:gtตัวเลือกเพื่อรับoptionองค์ประกอบทั้งหมดที่มีดัชนีมากกว่าศูนย์และremoveพวกมัน:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 

2
วิธียังคงเป็นตัวเลือกแรกเมื่อว่างเปล่า ()?
หน้ากาก

2
ถ้าใช้บูตเลือก$('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');แล้วเพิ่มต่อไปนี้เพื่อฟื้นฟูเลือกตัวเลือกหลังจากเปลี่ยนเลือก: มิฉะนั้นตัวเลือกใหม่จะไม่ปรากฏในรายการที่คุณเลือก
PHN

ฉันจะตรวจสอบหนึ่งในตัวเลือกนี้ได้อย่างไร?
Darós

ฉันเองพบว่าไวยากรณ์นี้สะอาดขึ้นเล็กน้อยสำหรับการสร้างโหนด jQuery$el.append($('<option/>', { value: value, text: key }));
rorofromfrance

ขอบคุณเพื่อน. หากคุณต้องกำหนดค่าที่เลือกเมื่อเราแก้ไขหน้าสำหรับค่าที่เลือกเริ่มต้นเราสามารถใช้สิ่งนี้ในลูปสำหรับการวนซ้ำที่เฉพาะเจาะจงเราสามารถเพิ่ม $ el.append ที่เลือกไว้ ($ ('<option />', {value : ค่าที่เลือก: 'เลือก', ข้อความ: คีย์}));
นักพัฒนา

79

ฉันได้คำตอบที่ดีเยี่ยมของ CMS ในการขยาย jQuery อย่างรวดเร็ว:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

คาดว่าอาร์เรย์ของวัตถุที่มีคีย์ "text" และ "value" ดังนั้นการใช้งานมีดังนี้:

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);

14
$('#comboBx').append($("<option></option>").attr("value",key).text(value));

โดยที่ comboBx คือ id กล่องคำสั่งผสมของคุณ

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

แก้ไข

หากคุณต้องการเก็บตัวเลือกแรกไว้และลบตัวเลือกอื่น ๆ ทั้งหมดคุณก็สามารถใช้งานได้

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);

คุณไม่ได้ลบตัวเลือกเก่าออกใช่ไหม
หน้ากาก

คุณต้องการล้างตัวเก่าหรือเพียงแค่เพิ่มตัวเลือกใหม่ไปยังตัวเลือกที่มีอยู่หรือไม่?
rahul

5

ด้วยเหตุผลแปลก ๆ บางส่วนนี้

$el.empty(); // remove old options

จากโซลูชัน CMS ไม่ทำงานสำหรับฉันดังนั้นแทนที่จะใช้สิ่งนี้

el.html(' ');

และมันใช้งานได้ ดังนั้นรหัสทำงานของฉันตอนนี้ดูเหมือนว่า:

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

3

การลบและเพิ่มองค์ประกอบ DOM นั้นช้ากว่าการแก้ไของค์ประกอบที่มีอยู่

หากชุดตัวเลือกของคุณมีความยาวเท่ากันคุณอาจทำสิ่งนี้:

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

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


1

ตัวอย่างเช่นหากรหัส html ของคุณมีรหัสนี้:

<select id="selectId"><option>Test1</option><option>Test2</option></select>

ในการเปลี่ยนรายการตัวเลือกภายในตัวเลือกของคุณคุณสามารถใช้รหัสนี้ได้ เมื่อชื่อของคุณเลือกชื่อselectId

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);

ในตัวอย่างด้านบนนี้ฉันเปลี่ยนรายการตัวเลือกเก่าด้วยหนึ่งตัวเลือกใหม่


1
เหตุใด OP จึงควรลองทำเช่นนี้ โปรดเพิ่มคำอธิบายของสิ่งที่คุณทำและทำไมคุณถึงทำแบบนั้นไม่เพียง แต่สำหรับ OP แต่สำหรับผู้เยี่ยมชมในอนาคต
Jay Blanchard

1

สิ่งนี้ช่วยได้ไหม?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;

3
คำถามนี้เกี่ยวกับการเพิ่ม <option> ใน <select> แบบไดนามิกโดยไม่เลือกตัวเลือกที่เฉพาะเจาะจง
sisve

1

โรงเรียนเก่า ๆ ที่ทำสิ่งต่างๆด้วยมือมันดีสำหรับฉันเสมอ

  1. ทำความสะอาดตัวเลือกและออกจากตัวเลือกแรก:

        $('#your_select_id').find('option').remove()
        .end().append('<option value="0">Selec...</option>')
        .val('whatever');
  2. หากข้อมูลของคุณมาจาก Json หรืออะไรก็ตาม (เพียงเชื่อมต่อข้อมูล):

        var JSONObject = JSON.parse(data);
        newOptionsSelect = '';
        for (var key in JSONObject) {
            if (JSONObject.hasOwnProperty(key)) {
                var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
            }
        }
    
        $('#your_select_id').append( newOptionsSelect );
  3. My Json Objetc:

        [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

วิธีนี้เหมาะสำหรับการทำงานกับ Ajax และคำตอบใน Json จากฐานข้อมูล


0

หากเราอัปเดต<select>อย่างต่อเนื่องและเราจำเป็นต้องบันทึกค่าก่อนหน้า:

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.