สมมติว่ามีรายการตัวเลือกคุณจะอัพเดต<select>
ด้วยตัวใหม่<option>
ได้อย่างไร
สมมติว่ามีรายการตัวเลือกคุณจะอัพเดต<select>
ด้วยตัวใหม่<option>
ได้อย่างไร
คำตอบ:
คุณสามารถลบตัวเลือกที่มีอยู่โดยใช้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
$el.append($('<option/>', { value: value, text: key }));
ฉันได้คำตอบที่ดีเยี่ยมของ 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);
$('#comboBx').append($("<option></option>").attr("value",key).text(value));
โดยที่ comboBx คือ id กล่องคำสั่งผสมของคุณ
หรือคุณสามารถผนวกตัวเลือกเป็นสตริงให้กับ InnerHTML ที่มีอยู่แล้วจากนั้นกำหนดให้กับ InnerHTML ที่เลือก
แก้ไข
หากคุณต้องการเก็บตัวเลือกแรกไว้และลบตัวเลือกอื่น ๆ ทั้งหมดคุณก็สามารถใช้งานได้
var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);
ด้วยเหตุผลแปลก ๆ บางส่วนนี้
$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));
});
การลบและเพิ่มองค์ประกอบ DOM นั้นช้ากว่าการแก้ไของค์ประกอบที่มีอยู่
หากชุดตัวเลือกของคุณมีความยาวเท่ากันคุณอาจทำสิ่งนี้:
$('#my-select option')
.each(function(index) {
$(this).text('someNewText').val('someNewValue');
});
ในกรณีที่ชุดตัวเลือกใหม่ของคุณมีความยาวแตกต่างกันคุณอาจลบ / เพิ่มตัวเลือกที่ว่างเปล่าที่คุณต้องการโดยใช้เทคนิคที่อธิบายไว้ข้างต้น
ตัวอย่างเช่นหากรหัส 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);
ในตัวอย่างด้านบนนี้ฉันเปลี่ยนรายการตัวเลือกเก่าด้วยหนึ่งตัวเลือกใหม่
สิ่งนี้ช่วยได้ไหม?
$("#SelectName option[value='theValueOfOption']")[0].selected = true;
โรงเรียนเก่า ๆ ที่ทำสิ่งต่างๆด้วยมือมันดีสำหรับฉันเสมอ
ทำความสะอาดตัวเลือกและออกจากตัวเลือกแรก:
$('#your_select_id').find('option').remove()
.end().append('<option value="0">Selec...</option>')
.val('whatever');
หากข้อมูลของคุณมาจาก 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 );
My Json Objetc:
[{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]
วิธีนี้เหมาะสำหรับการทำงานกับ Ajax และคำตอบใน Json จากฐานข้อมูล
หากเราอัปเดต<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');