ما هي أفضل طريقة لإضافة خيارات مختارة من شبيبة كائن مع jQuery ؟

StackOverflow https://stackoverflow.com/questions/170986

سؤال

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

هل كانت مفيدة؟

المحلول

نفس إجابات أخرى في مسج الأزياء:

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

نصائح أخرى

var output = [];

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

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

في هذه الطريقة التي تعمل باللمس "دوم" مرة واحدة فقط.

أنا لست متأكدا مما إذا أحدث خط يمكن تحويلها إلى $('#mySelect').html(الإخراج.join(")) لأنني لا أعرف مسج الداخلية (ربما يفعل بعض تحليل في html (طريقة))

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

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>

مسج

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

باستخدام عناصر DOM الخالق المساعد (المفضلة):

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

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

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

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

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

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

يكون forwarned...أنا باستخدام مسج المحمول 1.0b2 مع PhoneGap 1.0.0 على الروبوت 2.2 (السيانوجين 7.0.1) الهاتف (T-Mobile G2) و لا يمكن الحصول على .إلحاق() طريقة العمل على الإطلاق.اضطررت لاستخدام .html() كما يلي:

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

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

 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

هناك نهج باستخدام مايكروسوفت النموذجيه النهج حاليا بموجب اقتراح إدراجها في مسج الأساسية.هناك المزيد من القوة في استخدام النموذجيه حتى أبسط السيناريو قد لا يكون الخيار الأفضل.لمزيد من التفاصيل انظر سكوت قو ما بعد تحدد الميزات.

الأولى تشمل النموذجيه ملف js, المتاحة من جيثب.

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

القادم انشاء قالب

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

ثم مع البيانات الخاصة بك الاتصال .تقديم طريقة() 

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

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

لقد كتبت هذا النهج في مزيد من التفاصيل.

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

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

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

إلحاق ذلك ، 

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

أو حتى أفضل 

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

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

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

يبني مجموعة من العناصر باستخدام الخيار خريطة ومن ثم إلحاق كل منهم إلى حدد في وقت واحد باستخدام apply لإرسال كل خيار منفصل حجة على append وظيفة.

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

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

بدلا من تكرار نفس الرمز في كل مكان ، أود أن أقترح هو أكثر من المرغوب فيه أن الكتابة الخاصة بك وظيفة مسج مثل:

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

ثم لإضافة خيار فقط قم بما يلي:

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

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

أنه يعمل بشكل جيد مع مسج 1.4.1.

لإكمال المقال باستخدام قوائم ديناميكية مع ASP.NET MVC & مسج زيارة:http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

  1. $.each هو أبطأ من for حلقة
  2. في كل مرة, دوم اختيار ليس أفضل الممارسات في حلقة $("#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);

هناك فرز المشكلة مع هذا الحل في كروم (مسج 1.7.1) (كروم أنواع خصائص الكائن بالاسم/الرقم؟) وذلك للحفاظ على النظام (نعم ، إنه كائن الإساءة), لقد غيرت هذه:

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

هذا

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

ثم $.كل سوف تبدو مثل:

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

طريقة أخرى للقيام بذلك:

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

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

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

هذا يتلاعب دوم مرة واحدة فقط بعد أول مبنى عملاق السلسلة.

على الرغم من أن الإجابات السابقة كلها إجابات صحيحة - قد يكون من المستحسن أن إلحاق كل هذه 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);

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

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

البرنامج المساعد مسج يمكن العثور عليها هنا: http://remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/.

هذا ما فعلته مع ثنائي الأبعاد المصفوفات:العمود الأول هو البند الأول ، إضافة إلى innerHTML من <option>.العمود الثاني هو record_id أنا ، إضافة إلى 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. جافا سكريبت/Ajax

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

تنسيق JSON:

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

و رمز مسج لملء القيم إلى القائمة المنسدلة على اياكس النجاح:

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
}

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

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

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

$('#mySelect').html( $.map(selectValues, function(val, key){
    return '<option value="' + val + '">'+ key + '</option>';
}).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>

تعيين HTML الخاص بك حدد معرف في السطر التالي أدناه.هنا mySelect يتم استخدام معرف حدد العنصر. 

   var options = $("#mySelect");

ثم الحصول على الكائن الذي هو selectValues في هذا السيناريو ويحدد ذلك إلى مسج لكل حلقة.فإنه سيتم استخدام قيمة النص من الكائنات وبناء على ذلك ويلحق به في خيار الاختيارات على النحو التالي. 

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

وهذا عرض النص خيار القائمة عند القائمة المنسدلة تحديد مرة واحدة في النص يتم تحديد قيمة النص المحدد سيتم استخدامها.

على سبيل المثال.

"1":"اختبار 1", "2":"اختبار 2",

المنسدلة ،

اسم العرض:اختبار 1 -> القيمة 1 اسم العرض:الاختبار 2 -> القيمة 2

قررت أن تتناغم قليلا.

  1. التعامل مع قبل اختيار الخيار ؛ بعض المتصفحات الفوضى عندما إلحاق
  2. فقط ضرب دوم مرة واحدة مع إلحاق
  3. التعامل مع multiple مع إضافة المزيد من الخيارات
  4. تظهر كيفية استخدام كائن
  5. تظهر كيفية الخريطة باستخدام مجموعة من الكائنات

// objects as value/desc
let selectValues = {
  "1": "test 1",
  "2": "test 2",
  "3": "test 3",
  "4": "test Four"
};
//use div here as using "select" mucks up the original selected value in "mySelect"
let opts = $("<div />");
let opt = {};
$.each(selectValues, function(value, desc) {
  opts.append($('<option />').prop("value", value).text(desc));
});
opts.find("option").appendTo('#mySelect');

// array of objects called "options" in an object
let selectValuesNew = {
  options: [{
      value: "1",
      description: "2test 1"
    },
    {
      value: "2",
      description: "2test 2",
      selected: true
    },
    {
      value: "3",
      description: "2test 3"
    },
    {
      value: "4",
      description: "2test Four"
    }
  ]
};

//use div here as using "select" mucks up the original selected value
let opts2 = $("<div />");
let opt2 = {}; //only append after adding all options
$.map(selectValuesNew.options, function(val, index) {
  opts2.append($('<option />')
    .prop("value", val.value)
    .prop("selected", val.selected)
    .text(val.description));
});
opts2.find("option").appendTo('#mySelectNew');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect">
  <option value="" selected="selected">empty</option>
</select>

<select id="mySelectNew" multiple="multiple">
  <option value="" selected="selected">2empty</option>
</select>

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top