javascript - ما هي أفضل طريقة لإضافة خيارات إلى التحديد من ككائن JS باستخدام jQuery؟




15 Answers

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 () طريقة)

javascript jquery arrays html-select

ما هي أفضل طريقة لإضافة خيارات إلى <select> من كائن JavaScript باستخدام 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's :

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

التغييرات من matdumsa: (1) إزالة علامة إغلاق للخيار الموجود داخل () و (2) نقل الخصائص / السمات إلى خريطة كمعلمة ثانية من إلحاق ().




مسج

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

جافا سكريبت خالص

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



يبدو هذا أجمل ، ويوفر سهولة القراءة ، ولكنه أبطأ من الطرق الأخرى.

$.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(''));



joshperry

يبدو أن التنسيق العادي يعمل أيضًا كما هو متوقع ،

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

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



أن تغلق ... أنا باستخدام 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);



لقد قمت بعمل شيء كهذا ، وقمت بتحميل بند منسدل عبر أياكس . الاستجابة أعلاه مقبولة أيضًا ، ولكن من الجيد دائمًا الحصول على تعديل DOM أقل قدر ممكن لأداء أفضل.

لذا بدلاً من إضافة كل عنصر داخل حلقة ، من الأفضل جمع العناصر داخل حلقة وإلحاقها بمجرد اكتمالها.

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

إلحاقها ،

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

أو حتى أفضل

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



الطريقة البسيطة هي:

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



هناك مشكلة في الفرز مع هذا الحل في 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));
}); 



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 مرة واحدة فقط بعد بناء أول سلسلة عملاقة.




  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);



يمكنك فقط التكرار فوق صفيف json الخاص بك مع التعليمة البرمجية التالية

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




لقد وجدت أن هذا بسيط ويعمل بشكل رائع.

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



تنسيق JSON:

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

ورمز jQuery لتعبئة القيم إلى نجاح Dropdown على 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
}



أقوم بدمج أفضل إجابتين في إجابة رائعة.

var outputConcatenation = [];

$.each(selectValues, function(i, item) {   
     outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML"));
});

$("#myselect").html(outputConcatenation.join(''));



<!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>



Related