javascript - bootstrap - tooltip معنى




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

مسج

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

ما هي أفضل طريقة لإضافة خيارات إلى <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) نقل الخصائص / السمات إلى خريطة كمعلمة ثانية من إلحاق ().


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

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

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

أن تغلق ... أنا باستخدام 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 Elements Creator (المفضل لدي):

$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

باستخدام مُنشئ Option (غير متأكد من دعم المستعرض):

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

باستخدام document.createElement (تجنب عمل إضافي يقوم بتحليل HTML مع $("<option></option>") ):

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));

باستخدام وظيفة $ .map () ، يمكنك القيام بذلك بطريقة أكثر أناقة:

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

تنسيق 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
}

حل وسط من الأنواع بين أعلى إجابتين ، في "واحد":

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("<option/>")
            .val(val.key)
            .text(val.value);
    })
);

إنشاء صفيف من عناصر الخيار باستخدام map ثم إلحاقها جميعًا بـ Select في آنٍ واحد باستخدام apply على إرسال كل خيار كوسيطة منفصلة في وظيفة append .


على الرغم من أن الإجابات السابقة هي جميع الإجابات الصحيحة - قد يكون من المستحسن إلحاق جميع هذه المستندات بـ documentFragmnet أولاً ، ثم إلحاق جزء المستند بعنصر ما بعد ...

انظر أفكار جون 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);

كل هذه الإجابات تبدو معقدة بدون داع. كل ما تحتاجه هو:

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

وهذا متوافق تماما عبر المتصفح.


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

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

نفس الإجابات الأخرى ، بطريقة jQuery:

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

هذا هو أسرع قليلا وأنظف.

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

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

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

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


 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


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

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 visit: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx


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







html-select