วิธีที่ดีที่สุดในการเพิ่มตัวเลือกให้กับการเลือกจากเป็นวัตถุ JavaScript ด้วย jQuery คืออะไร?


1379

วิธีที่ดีที่สุดในการเพิ่มตัวเลือกไปยัง<select>วัตถุจาวาสคริปต์โดยใช้ jQuery คืออะไร?

ฉันกำลังมองหาสิ่งที่ฉันไม่ต้องการให้มีปลั๊กอิน แต่ฉันก็จะสนใจปลั๊กอินที่อยู่ข้างนอกด้วย

นี่คือสิ่งที่ฉันทำ:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

วิธีแก้ปัญหาที่เรียบง่าย / สะอาด:

นี่คือmatdumsa รุ่นที่ทำความสะอาดและเรียบง่าย:

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

การเปลี่ยนแปลงจาก matdumsa: (1) ลบแท็กปิดสำหรับตัวเลือกภายในผนวก () และ (2) ย้ายคุณสมบัติ / คุณสมบัติลงในแผนที่เป็นพารามิเตอร์ตัวที่สองของผนวก ()


4
อาจจะช่วย: texotela.co.uk/code/jquery/select (มันเป็นความช่วยเหลือสำหรับฉันหลังจากที่ฉัน stumbled เมื่อคำถามนี้)
ManBugra

2
เวอร์ชันที่ล้างแล้วด้านบนใช้งานได้ใน Jquery 1.4+ เท่านั้น สำหรับรุ่นเก่าให้ใช้คำตอบใน matdumsa
Thedric Walker

{value: key} ควรเป็น {"value": key} ตามที่เห็นในคำตอบของ matdumsa
Nick P

ฉันไม่เชื่อเช่นนั้นเนื่องจากvalueเป็นสตริง (และเข้ารหัสยาก) จึงไม่จำเป็นต้องเสนอราคา
Darryl Hein

1
ชื่อควรเป็น "วิธีที่ดีที่สุดในการเพิ่มตัวเลือกในการเลือกจากวัตถุ JSON ที่มี jQuery คืออะไร
Dr Fred

คำตอบ:


1383

เช่นเดียวกับคำตอบอื่น ๆ ใน jQuery:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

99
ก่อนอื่นฉันจะกำหนดให้$("#mySelect")กับ var มิฉะนั้นการเรียก$("#mySelect")ทุกครั้งในลูปจะสิ้นเปลืองมากเช่นเดียวกับการอัปเดต DOM ดูคะแนน # 3 และ # 6 ได้ที่artzstudio.com/2009/04/jquery-performance-rules/…
Patrick

7
var mySelect = $("#mySelect") outside of the ทีนี้คุณก็แค่วนรอบ `` นั่นจะมีประสิทธิภาพมากขึ้น ดูคำตอบของ Carl ด้านล่าง
Patrick

17
คำแนะนำของฉันสำหรับรูปแบบ jQuery ที่ดีกว่า: $ ('# mySelect'). ผนวก ($ ("<ตัวเลือก />") .val (สำคัญ). ข้อความ (ค่า));
FAjir

10
ด้วยความนิยมของคำตอบนี้คุณควรหลีกเลี่ยงการอัพเดท DOM ในลูป jsperf.com/jquery-append-array-vs-string
jthomas

6
คำตอบนี้ทำให้เข้าใจผิดมากเพราะความตั้งใจที่ผิด ... attrและtextเป็นวิธีการของ$('<option/>')-object
phil294

268
var output = [];

$.each(selectValues, function(key, value)
{
  output.push('<option value="'+ key +'">'+ value +'</option>');
});

$('#mySelect').html(output.join(''));

ด้วยวิธีนี้คุณ "แตะ DOM" เพียงครั้งเดียว

ฉันไม่แน่ใจว่าสามารถแปลงบรรทัดล่าสุดเป็น $ ('# mySelect'). html (output.join ('')) ได้หรือไม่เพราะฉันไม่ทราบว่า jQuery internals (อาจเป็นการแยกวิเคราะห์ใน html () วิธี)


20
เห็นได้ชัดว่าวิธีการของคุณเร็วกว่าคำตอบที่ 'ถูกต้อง' ข้างต้นเนื่องจากมันใช้ jQuery น้อยลงเช่นกัน
Teej

4
บรรทัด "$ ('# mySelect'). รับ (0) .innerHTML = output.join ('');" ทำงานได้ใน Chrome และ FF3.x แต่ไม่ได้อยู่ใน IE7 เท่าที่ฉันจะบอกได้
blu

19
สิ่งนี้จะหยุดพักหากkeyมีคำพูดบางส่วนหรือ>, <อยู่ในนั้น
nickf

3
และถ้าฉันมีสองตัวเลือกที่ฉันไม่ต้องการสูญเสีย ฉันจะผนวกค่าตัวเลือกใหม่เหล่านี้เข้ากับค่าที่มีอยู่ได้อย่างไร
VansFannel

6
การปรับปรุงเล็ก ๆ น้อย ๆ อย่างหนึ่งคือการเชื่อมต่อโดยใช้การเข้าร่วมมากกว่าเครื่องหมายบวกเช่น: output.push ('<option value = "', key, '">', value, '</option>');
MM

202

นี่คือเร็วขึ้นและสะอาดขึ้นเล็กน้อย

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("<option/>", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>


3
สมบูรณ์ หากต้องการเพิ่มคุณสมบัติเพิ่มเติมสำหรับการเลือกสามารถเพิ่มได้ $ .each (selectValues, ฟังก์ชั่น (id, value, text) {$ ('# mySelect') ผนวก ($ ("<option />", {id: ค่า id: value, text: text}));} );
idok

45
มันคิดว่ามันเป็นความคิดที่ดีกว่าในการแคช `$ ('# mySelect') 'เพื่อให้คุณค้นหาเพียงครั้งเดียวก่อนลูป ขณะนี้มันกำลังค้นหา DOM สำหรับองค์ประกอบสำหรับทุกตัวเลือก
Sushanth -

@ Sushanth - การแสดงที่ยิ่งใหญ่ขนาดนี้ถ้าฉากมีขนาดเล็ก?
ckarbass

3
@ckarbass - ขึ้นอยู่กับว่า DOM ของคุณใหญ่แค่ไหน ความพยายามที่มีขนาดใหญ่และน้อยมากในการกำหนดให้ตัวแปรมีค่าน้อยกว่าการเขียนความคิดเห็นใน SO!
Nick H247

97

jQuery

var list = $("#selectList");
$.each(items, function(index, item) {
  list.append(new Option(item.text, item.value));
});

JavaScript วานิลลา

var list = document.getElementById("selectList");
for(var i in items) {
  list.add(new Option(items[i].text, items[i].value));
}

4
ไม่เคยได้ยินOptionวัตถุมาก่อน มันมีอยู่ในเบราว์เซอร์ทั้งหมดหรือไม่
Darryl Hein

2
ฉันลองใช้new Optionแต่พบว่ามันใช้งานไม่ได้ใน IE6 และ 7 ฉันไม่มีเหตุผลว่าทำไม แต่ตัวเลือก jQuery เต็มรูปแบบหลายตัวใช้งานได้
Darryl Hein

เป็นวิธีที่ดีในการเพิ่มตัวเลือกเช่นกัน new Option('display', value, true)
boatcoder

@ Mark0978 จริง ๆ แล้วมันคือ new Option('display', value, true, true)( javascriptkit.com/jsref/select.shtml )
Carl Hörberg

38

หากคุณไม่จำเป็นต้องรองรับ IE เวอร์ชันเก่าการใช้OptionConstructorเป็นวิธีที่ชัดเจนวิธีแก้ปัญหาที่สามารถอ่านได้และมีประสิทธิภาพ :

$(new Option('myText', 'val')).appendTo('#mySelect');

มันเทียบเท่ากับการใช้งานเพื่อ แต่สะอาดกว่า:

$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');

31

สิ่งนี้ดูดีกว่าให้ความสามารถในการอ่าน แต่ช้ากว่าวิธีอื่น

$.each(selectData, function(i, option)
{
    $("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});

หากคุณต้องการความเร็ววิธีที่เร็วที่สุด (ทดสอบแล้ว) คือการใช้อาเรย์ไม่ใช่การต่อสตริงและใช้การต่อสายเพียงครั้งเดียว

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});

$('#selectBox').append(auxArr.join(''));

นี่ไม่ได้หมายความว่าวิธีที่ "เร็วที่สุด" จะแทรกส่วนสตริงต่าง ๆ เป็นรายการอาร์เรย์แต่ละรายการด้วยแทนที่จะเชื่อมต่อสิ่งที่ประกอบเป็นตัวเลือกทุกตัวก่อนที่จะแทรกเข้าไปในอาร์เรย์
bitoolean

22

การปรับแต่งคำตอบ @ joshperry ที่เก่ากว่า:

ดูเหมือนว่า. appendธรรมดายังทำงานได้ตามที่คาดไว้

$("#mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

หรือสั้นกว่า

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

คุณสามารถใช้$.weakmapเพื่ออนุญาตให้GC
Chef_Code

2
คะแนนโบนัสสำหรับความสง่างาม: การใช้map()โครงสร้างอย่างเหมาะสมรวมกับคุณสมบัติของappend()เพื่อเพิ่มอาร์เรย์ของวัตถุอย่างถูกต้อง!
Jochem Schulenklopper

@ Joshperry ฉันรู้สึกผิดหวังเพราะฉันคาดว่าจะมีการแก้ไข / อัปเดตทางเทคนิค
Сухой27

20

คำตอบทั้งหมดเหล่านี้ดูเหมือนจะซับซ้อนโดยไม่จำเป็น สิ่งที่คุณต้องการคือ:

var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
        options[options.length] = new Option(value, key);
});

นั่นเป็นเบราว์เซอร์ที่เข้ากันได้อย่างสมบูรณ์


มันควรจะเป็นnew Option(value, key);อย่างไร เพื่อพารามิเตอร์เป็นตัวเลือก (text_visible_part, value_behind_the_scenes)
Bob Stein

Array ไม่ได้รองรับการข้ามเบราว์เซอร์หรือไม่ ถ้าอย่างนั้นการอ่าน Array push จะอ่านได้ง่ายกว่าหรือไม่?
bitoolean

18

ได้รับการเตือน ... ฉันใช้ jQuery Mobile 1.0b2 กับ PhoneGap 1.0.0 บนโทรศัพท์ Android 2.2 (Cyanogen 7.0.1) (T-Mobile G2) และไม่สามารถใช้. append () เพื่อทำงานได้เลย ฉันต้องใช้. html () ดังนี้:

var options;
$.each(data, function(index, object) {
    options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

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

 $('#choose_schedule').get(0).innerHTML = output.join('');

ฉันได้ทำการทดสอบมาสองสามครั้งแล้วและฉันเชื่อว่านี่จะทำงานได้เร็วที่สุด : P


1
. แต่ละคนช้ามากเมื่อเทียบกับวิธีอื่น ๆ ในการบรรลุผลลัพธ์เดียวกัน นี่คือสิ่งที่ฉันคิดและจะแนะนำวิธีการนี้
Allen Tellez

น่าเสียดายที่ 90% ของรูปแบบที่นี่ใช้ $ .each () ห่วงสำหรับ () สามารถให้คุณควบคุมได้มากขึ้นและเพิ่มประสิทธิภาพการทำงานแม้ว่าจะมีขนาดเล็กลงก็ตาม
HoldOffHunger

15

มีวิธีการที่ใช้Microsoft Templatingซึ่งปัจจุบันอยู่ภายใต้ข้อเสนอเพื่อรวมเข้ากับ jQuery core มีอำนาจมากขึ้นในการใช้ templating ดังนั้นสำหรับสถานการณ์ที่ง่ายที่สุดอาจไม่ใช่ตัวเลือกที่ดีที่สุด สำหรับรายละเอียดเพิ่มเติมโปรดดูที่โพสต์ของ Scott Gu การสรุปคุณสมบัติ

ครั้งแรกที่รวมไฟล์ js templating ที่พร้อมใช้งานจากGitHub

<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

ตั้งค่าแม่แบบถัดไป

<script id="templateOptionItem" type="text/html">
    <option value=\'{{= Value}}\'>{{= Text}}</option>
</script>

จากนั้นใช้ data ของคุณในการเรียกใช้วิธีการ. render ()

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

ฉันบล็อกวิธีนี้โดยละเอียดแล้ว


12

ผมได้ทำบางสิ่งบางอย่างเช่นนี้โหลดรายการแบบเลื่อนลงผ่านทางอาแจ็กซ์ การตอบสนองข้างต้นก็ยอมรับได้เช่นกัน แต่ก็ดีเสมอที่จะมีการดัดแปลง DOM น้อยที่สุดเท่าที่จะทำได้เพื่อประสิทธิภาพที่ดีขึ้น

ดังนั้นแทนที่จะเพิ่มแต่ละรายการในลูปจะเป็นการดีกว่าในการรวบรวมไอเท็มภายในลูปและต่อท้ายเมื่อเสร็จแล้ว

$(data).each(function(){
    ... Collect items
})

ผนวกมัน

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

หรือดีกว่า

$('#select_id').html(items);

$ ( '# select_id') HTML (รายการ). ทำงานตรงตามที่ฉันต้องการการใช้งานต่อท้ายจะเก็บไว้ในการต่อท้ายรายการในเหตุการณ์ onchange ทั้งหมด ขอบคุณมาก.
Dipanwita Das

10

วิธีง่ายๆคือ:

$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");

ฉันได้สร้างรายการตัวเลือกของฉันแล้วดังนั้นการเติมช่องที่เลือกจึงง่ายเหมือนวิลลาร์ดพูด
Loony2nz

10

คำตอบอื่น ๆ ส่วนใหญ่ใช้eachฟังก์ชั่นเพื่อย้ำผ่านselectValuesฟังก์ชั่นเพื่อย้ำมากกว่าสิ่งนี้ต้องการให้ผนวกเข้าด้วยกันสำหรับแต่ละองค์ประกอบและจะมีการเรียกใช้ reflow เมื่อมีการเพิ่มแต่ละรายการแยกกัน

การอัปเดตคำตอบนี้เป็นวิธีการทำงานที่ใช้สำนวนมากขึ้น (โดยใช้ JS สมัยใหม่) สามารถสร้างขึ้นเพื่อเรียกappendเพียงครั้งเดียวด้วยอาร์เรย์ของoptionองค์ประกอบที่สร้างขึ้นโดยใช้แผนที่และตัวOptionสร้างองค์ประกอบ

การใช้Optionองค์ประกอบ DOM ควรลดค่าใช้จ่ายในการเรียกใช้ฟังก์ชันเนื่องจากoptionองค์ประกอบไม่จำเป็นต้องได้รับการปรับปรุงหลังจากการสร้างและตรรกะการแยกวิเคราะห์ของ jQuery ไม่จำเป็นต้องเรียกใช้

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

สิ่งนี้สามารถทำให้ง่ายขึ้นได้อีกถ้าคุณสร้างฟังก์ชั่นยูทิลิตี้จากโรงงานซึ่งจะสร้างอ็อพเจ็กอ็อปชั่นใหม่:

const newoption = (...args) => new Option(...args)

จากนั้นสามารถให้โดยตรงกับmap:

$('mySelect').append($.map(selectValues, newoption))

สูตรก่อนหน้า

เพราะappendยังช่วยให้การส่งผ่านค่าเป็นจำนวนตัวแปรของการขัดแย้งเราสามารถ precreate รายชื่อของoptionองค์ประกอบmapapplyและผนวกพวกเขาเป็นข้อโต้แย้งในสายเดียวโดยใช้

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

ดูเหมือนว่าใน jQuery รุ่นที่ใหม่กว่านั้นappendยังยอมรับอาร์กิวเมนต์อาเรย์และสิ่งนี้สามารถทำให้ง่ายขึ้นบ้าง:

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

10
function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}   

มันทำงานได้ดีกับ jQuery 1.4.1

สำหรับบทความฉบับสมบูรณ์สำหรับการใช้รายการแบบไดนามิกด้วย ASP.NET MVC & jQuery โปรดไปที่:

รายการเลือกแบบไดนามิกด้วย MVC และ jQuery


8

มีปัญหาในการเรียงลำดับสำหรับโซลูชันนี้ใน Chrome (jQuery 1.7.1) (Chrome เรียงลำดับคุณสมบัติของวัตถุตามชื่อ / หมายเลขหรือไม่) ดังนั้นเพื่อรักษาลำดับ (ใช่เป็นการใช้วัตถุที่ผิดวิธี) ฉันเปลี่ยนสิ่งนี้:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

สำหรับสิ่งนี้

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

และ $ .each จะมีลักษณะดังนี้:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
}); 

8

แทนที่จะทำซ้ำรหัสเดียวกันทุกที่ฉันอยากจะแนะนำว่าควรเขียนฟังก์ชัน jQuery ของคุณเองเช่น:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

จากนั้นเมื่อต้องการเพิ่มตัวเลือกให้ทำดังต่อไปนี้:

$('select').addOption('0', 'None');

คุณสามารถทำอย่างละเอียด?
Mo.

7

คุณสามารถวนซ้ำ json array ของคุณด้วยรหัสต่อไปนี้

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");


7

แม้ว่าคำตอบก่อนหน้านี้เป็นคำตอบที่ถูกต้องทั้งหมด แต่ก็ควรแนะนำให้ผนวกส่วนเหล่านี้ทั้งหมดเข้ากับ documentFragmnet ก่อนจากนั้นผนวกส่วนของเอกสารนั้นเป็นองค์ประกอบหลังจาก ...

ดูความคิดของ John Resig ในเรื่องนี้ ...

บางสิ่งบางอย่างตาม:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

7
  1. $.each ช้ากว่า forลูป
  2. แต่ละครั้งการเลือก DOM ไม่ใช่แนวปฏิบัติที่ดีที่สุด $("#mySelect").append();

ดังนั้นทางออกที่ดีที่สุดคือ

ถ้าข้อมูล JSON respคือ

[
    {"id":"0001", "name":"Mr. P"},
    {"id":"0003", "name":"Mr. Q"},
    {"id":"0054", "name":"Mr. R"},
    {"id":"0061", "name":"Mr. S"}
]

ใช้มันเป็น

var option = "";
for (i=0; i<resp.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

6

อีกวิธีหนึ่งในการทำ:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("<option/>", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

ฉันเห็นสิ่งที่คุณทำที่นี่ ... คุณได้รับคำแนะนำในการแคช$('#mySelect')แล้ว refactored @rocktheroad คำตอบ ... อะไรก็ตามนี่คือวิธีแก้ปัญหาที่ใช้งานได้จริงมากขึ้น
Chef_Code

6
if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";

    $("#myselect").empty().append(opts);
}

สิ่งนี้จะควบคุม DOM เพียงครั้งเดียวหลังจากสร้างสตริงขนาดยักษ์ครั้งแรก


คุณสามารถเพิ่มประสิทธิภาพนี้เพิ่มเติมและหลีกเลี่ยงการใช้ jQuery ทั้งหมดโดยแทนที่$("#myselect").empty().append(opts);ด้วยgetElementById('myselect').innerHtml = opts;
vahanpwns

6

นั่นคือสิ่งที่ผมกับอาร์เรย์สองมิติ: คอลัมน์แรกคือรายการ i, เพิ่มของinnerHTML <option>คอลัมน์ที่สองคือ record_id i เพิ่มvalueใน<option>:

  1. PHP

    $items = $dal->get_new_items(); // Gets data from the database
    $items_arr = array();
    $i = 0;
    foreach ($items as $item)
    {
        $first_name = $item->first_name;
        $last_name = $item->last_name;
        $date = $item->date;
        $show = $first_name . " " . $last_name . ", " . $date;
        $request_id = $request->request_id;
        $items_arr[0][$i] = $show;
        $items_arr[1][$i] = $request_id;
        $i++;
    }
    
    echo json_encode($items_arr);
  2. JavaScript / อาแจ็กซ์

            function ddl_items() {
                if (window.XMLHttpRequest) {
                    // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
                    xmlhttp=new XMLHttpRequest();
                }
                else{
                    // Code for Internet Explorer 6 and Internet Explorer 5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
    
                xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    var arr = JSON.parse(xmlhttp.responseText);
                    var lstbx = document.getElementById('my_listbox');
    
                    for (var i=0; i<arr.length; i++) {
                        var option = new Option(arr[0][i], arr[1][i]);
                        lstbx.options.add(option);
                    }
                }
            };
    
            xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
            xmlhttp.send();
        }
    }

ดูดี. น่าเสียดายที่มันไม่ได้ใช้ jQuery นอกจากนี้ฉันเคยมีปัญหากับเมธอด select.options.add () ไม่สามารถจำได้ว่าเบราว์เซอร์ใดและปัญหาที่แน่นอน แต่ฉันตัดสินใจที่จะหลีกทางและให้ jQuery จัดการกับความแตกต่าง
Darryl Hein

ฉันเป็น noob ทั้งหมดที่มี PHP และ JQuerry แต่โค้ดด้านบนใช้ได้กับทุกเบราว์เซอร์ ปัญหาเดียว - มันใช้งานไม่ได้กับ iPhone ฉันโพสต์คำถามเกี่ยวกับเรื่องนี้โชคไม่ดี :( stackoverflow.com/questions/11364040/…
Salty


5

ฉันพบว่ามันง่ายและใช้งานได้ดี

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

4

รูปแบบ JSON:

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

และรหัส jQuery เพื่อเติมค่าลงในความสำเร็จของ Ajax:

success: function(json) {
    var options = [];
    $('#org_category').html('');  // Set the Dropdown as Blank before new Data
    options.push('<option>-- Select Category --</option>');
    $.each(JSON.parse(json), function(i, item) {
        options.push($('<option/>',
        {
           value: item.org_name, text: item.org_name
        }));
    });
    $('#org_category').append(options);  // Set the Values to Dropdown
}

3

เมื่อใช้ฟังก์ชัน $ .map () คุณสามารถทำสิ่งนี้ได้อย่างสวยงามยิ่งขึ้น:

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).join(''));

นั่นคือชนิดที่สั้นกว่า แต่ปัญหาหนึ่งคือการจัดการกับการหลบหนีของ val และ vars สำคัญที่คำตอบที่ยอมรับจะทำ
Darryl Hein

2
<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <script type="text/javascript">
    function setprice(){
        var selectValues = { "1": "test 1", "2": "test 2" };
        $.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value",key)
                    .text(value)); 
});

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

2

ตั้งค่ารหัส HTML เลือกของคุณเป็นบรรทัดต่อไปนี้ด้านล่าง ในที่นี่mySelectจะใช้เป็นรหัสขององค์ประกอบที่เลือก

   var options = $("#mySelect");

จากนั้นรับวัตถุซึ่งเป็น selectValues ​​ในสถานการณ์นี้และตั้งค่าเป็น jquery สำหรับแต่ละลูป มันจะใช้ค่าและข้อความของวัตถุตามและผนวกเข้ากับการเลือกตัวเลือกดังนี้

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

ตัวเลือกนี้จะแสดงข้อความเป็นรายการตัวเลือกเมื่อเลือกรายการแบบเลื่อนลงและเมื่อข้อความถูกเลือกค่าของข้อความที่เลือกจะถูกใช้

เช่น.

"1": "ทดสอบ 1", "2": "ทดสอบ 2",

หล่นลง,

ชื่อที่แสดง: ทดสอบ 1 -> ค่าคือ 1 ชื่อที่แสดง: ทดสอบ 2 -> ค่าคือ 2


โปรดอธิบายเกี่ยวกับวิธีแก้ปัญหาเล็กน้อย
Vinay Prajapati

2

ที่จริงแล้วเพื่อให้ได้ประสิทธิภาพที่ดีขึ้นจะเป็นการดีกว่าที่จะสร้างรายการตัวเลือกแยกต่างหากและผนวกเข้ากับ id ที่เลือก

var options = [];
$.each(selectValues, function(key, value) {
    options.push ($('<option>', { value : key })
          .text(value));
});
 $('#mySelect').append(options);

http://learn.jquery.com/performance/append-outside-loop/

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.