การเพิ่มตัวเลือกให้กับ <select> โดยใช้ jQuery?

วิธีที่ง่ายที่สุดในการเพิ่มoptionลงในแบบเลื่อนลงโดยใช้ jQuery คืออะไร?

จะใช้งานได้ไหม

$("#mySelect").append('<option value=1>My option</option>');

สิ่งนี้ไม่ทำงานใน IE8 (แต่ใช้ใน FF):

$("#selectList").append(new Option("option text", "value"));

DID นี้ทำงาน:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

ส่วนตัวผมชอบไวยากรณ์นี้สำหรับตัวเลือกต่อท้าย:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

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

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

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

1. $('#select').append($('<option>', {value:1, text:'One'}));

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

หากชื่อหรือค่าของตัวเลือกเป็นแบบไดนามิกคุณจะไม่ต้องกังวลเกี่ยวกับการหลีกเลี่ยงอักขระพิเศษในนั้น ในนี้คุณอาจต้องการวิธีการ DOM ง่าย ๆ :

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

ตัวเลือกที่ 1-

คุณสามารถลองสิ่งนี้ -

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

แบบนี้-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

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

<select id='mySelect'></select>

ตัวเลือก 2-

หรือลองสิ่งนี้ -

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

แบบนี้-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

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

<select id='mySelect'></select>

ง่ายมาก:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

หรือ

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));

ที่ใช้งานได้ดี

หากเพิ่มองค์ประกอบตัวเลือกมากกว่าหนึ่งรายการฉันขอแนะนำให้ดำเนินการผนวกหนึ่งครั้งซึ่งตรงข้ามกับการดำเนินการผนวกในแต่ละองค์ประกอบ

ด้วยเหตุผลใดก็ตามที่ทำ$("#myselect").append(new Option("text", "text"));ไม่ได้ผลสำหรับฉันใน IE7 +

ฉันต้องใช้ $("#myselect").html("<option value='text'>text</option>");

เพื่อช่วยในการปฏิบัติงานคุณควรพยายามเปลี่ยน DOM เพียงครั้งเดียวดังนั้นหากคุณเพิ่มตัวเลือกมากมาย

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

ฉันชอบที่จะใช้วิธีการไม่ jquery:

mySelect.add(new Option('My option', 1));

คุณสามารถเพิ่มตัวเลือกแบบไดนามิกลงในแบบเลื่อนลงดังแสดงในตัวอย่างด้านล่าง ในตัวอย่างนี้ฉันได้นำข้อมูลอาเรย์และผูกค่าอาเรย์เหล่านั้นกับแบบเลื่อนลงดังแสดงในภาพหน้าจอเอาท์พุท

เอาท์พุท:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

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

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

มีสองวิธี คุณสามารถใช้ทั้งสองอย่างนี้

ครั้งแรก:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

ประการที่สอง:

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});

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

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

สิ่งนี้จะแทรก "รายการใหม่" เป็นรายการที่ 3 ในส่วนที่เลือก

คุณสามารถผนวกและตั้งค่าคุณลักษณะด้วยข้อความ:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

เราพบปัญหาบางอย่างเมื่อคุณผนวกตัวเลือกและใช้การตรวจสอบ jquery คุณต้องคลิกหนึ่งรายการในเลือกหลายรายการ คุณจะเพิ่มรหัสนี้เพื่อจัดการ:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

เกี่ยวกับเรื่องนี้

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

    $('#items').append(option);

นี่เป็นเพียงจุดด่วนสำหรับประสิทธิภาพที่ดีที่สุด

เสมอเมื่อคุณจัดการกับตัวเลือกมากมายสร้างสตริงขนาดใหญ่แล้วเพิ่มลงใน 'เลือก' เพื่อประสิทธิภาพที่ดีที่สุด

FG

var $ mySelect = $ ('# mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

เร็วยิ่งขึ้น

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

หากคุณได้รับข้อมูลจากวัตถุบางอย่างเพียงส่งต่อวัตถุนั้นไปยังฟังก์ชัน ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

ชื่อและรหัสเป็นชื่อของคุณสมบัติของวัตถุ ... เพื่อให้คุณสามารถเรียกสิ่งที่คุณต้องการ ... และ ofcourse ถ้าคุณมีอาร์เรย์ ... คุณต้องการสร้างฟังก์ชั่นที่กำหนดเองด้วยสำหรับวง ... และเพียงแค่เรียกฟังก์ชั่นใน เอกสารพร้อมแล้ว ... ไชโย

ตามคำตอบของ duleสำหรับการต่อท้ายรายการคอลเลกชันหนึ่งซับfor...inจะทำงานด้วยความมหัศจรรย์:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

ทั้งค่าวัตถุและดัชนีถูกกำหนดให้กับตัวเลือก โซลูชันนี้ใช้ได้แม้ในjQueryเก่า(v1.4) !

หากคุณมีoptgroupอยู่ภายในตัวเลือกคุณมีข้อผิดพลาดใน DOM

ฉันคิดว่าวิธีที่ดีที่สุด:

$("#select option:last").after($('<option value="1">my option</option>'));

คุณสามารถลองรหัสด้านล่างเพื่อผนวกตัวเลือก

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

$('#select_id').append($('<option>',{ value: v, text: t }));

นี่คือวิธีที่ฉันทำโดยมีปุ่มเพื่อเพิ่มแต่ละแท็กที่เลือก

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

คุณสามารถทำได้ใน ES6:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

หากมีคนมาที่นี่กำลังมองหาวิธีเพิ่มตัวเลือกด้วยคุณสมบัติของข้อมูล

ใช้attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

ใช้data - version เพิ่ม 1.2.3

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);