JQuery के साथ जावास्क्रिप्ट ऑब्जेक्ट के रूप में चयन करने के लिए विकल्पों को जोड़ने का सबसे अच्छा तरीका क्या है?

Question

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

एक साफ / सरल समाधान:

यह एक साफ और सरलीकृत संस्करण है, मत्तम्मा का :

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

Matdumsa से परिवर्तन: (1) ने परिशिष्ट के अंदर विकल्प के लिए नज़दीकी टैग को हटा दिया () और (2) ने गुणों / विशेषताओं को मानचित्र के दूसरे पैरामीटर के रूप में स्थानांतरित कर दिया ()।

Comments

मदद की शायद: texotela.co.uk/code/jquery/select (यह मेरे लिए एक मदद के बाद मैं इस सवाल पर ठोकर खाई थी)

— ManBugra

ऊपर सूचीबद्ध साफ किया गया संस्करण केवल Jquery 1.4+ में काम करता है। पुराने संस्करणों के लिए माटडूमा के उत्तर में एक का उपयोग करें

— थ्रेड्रिक वाकर

{value: key} होना चाहिए {"value": key} जैसा कि मैडमम्सा के उत्तर में देखा गया है।

— निक पी।

मुझे विश्वास नहीं है क्योंकि valueयह एक स्ट्रिंग (और हार्ड कोडित) है जिसे उद्धृत करने की आवश्यकता नहीं है।

— डैरिल हेन

शीर्षक इसके बजाय होना चाहिए "JSON ऑब्जेक्ट whith jQuery से चयन के लिए विकल्पों को जोड़ने का सबसे अच्छा तरीका क्या है?

— डॉ। फ्रेड

Answer 1

एक jQuery फैशन में अन्य उत्तरों के समान:

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

Comments

मैं सबसे पहले $("#mySelect")एक var को असाइन करूंगा , अन्यथा $("#mySelect")लूप के अंदर हर बार कॉल करना बहुत बेकार है, जैसा कि DOM को अपडेट करना है। Artzstudio.com/2009/04/jquery-performance-rules/…

— पैट्रिक

अच्छी तरह से आप बस var mySelect = $("#mySelect") outside of the प्रत्येक `पाश कर सकता है । यह बहुत अधिक कुशल होगा। नीचे कार्ल का जवाब देखें

— पैट्रिक

एक बेहतर jQuery शैली के लिए मेरी सिफारिश: $ ('# mySelect') .append ($ ("<विकल्प />") .val (कुंजी) .text (मूल्य));

— फजीर

इस उत्तर की लोकप्रियता के साथ यह ध्यान देने योग्य है कि आपको लूप में DOM अपडेट से बचना चाहिए। jsperf.com/jquery-append-array-vs-string

— jthomas

गलत जवाब के कारण यह जवाब बहुत भ्रामक था ... attrऔर textवास्तव में $('<option/>')-object के तरीके हैं

— phil294

Answer 2

var output = [];

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

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

इस तरह आप केवल एक बार "DOM को टच करें"।

मुझे यकीन नहीं है कि अगर नवीनतम लाइन को $ ('# mySelect') में परिवर्तित किया जा सकता है। html (आउटपुट.जॉइन ('')) क्योंकि मुझे jQuery के इंटर्नल नहीं पता हैं (शायद यह html () में कुछ पार्सिंग करता है) तरीका)

Comments

आप विधि स्पष्ट रूप से ऊपर 'सही' उत्तर की तुलना में तेजी से एक है क्योंकि यह कम jQuery का उपयोग करता है।

— तीज

लाइन "$ ('# mySelect') मिलता है। (0) .innerHTML = output.join (')';" क्रोम और FF3.x में नहीं बल्कि IE7 में जहाँ तक काम करता है मैं बता सकता हूँ के रूप में

— ब्लू

यह टूट जाता है अगर keyकुछ उद्धरण या >, <इसमें है।

— nickf

और, अगर मेरे पास दो विकल्प हैं जिन्हें मैं खोना नहीं चाहता। मैं मौजूदा विकल्पों में इन नए विकल्पों के मूल्यों को कैसे जोड़ सकता हूं?

— वैनफैननेल

एक छोटा सा सुधार प्लस साइन के बजाय जॉइन का उपयोग करके सम्‍मिलित करना है, जैसे: output.push ('<option value = "', key, '">', value, '</ option>');

— एम.एम.

Answer 3

यह थोड़ा तेज और क्लीनर है।

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>

Comments

उत्तम। इसे जोड़ने के लिए, चयन के लिए अतिरिक्त विशेषताओं को जोड़ा जा सकता है। $ .each (सेलेक्टवल्स, फंक्शन (आईडी, वैल्यू, टेक्स्ट) {$ ('# mySelect')। );

— इदोक

यह लगता है कि यह `$ ('# mySelect') को कैश करने के लिए एक बेहतर विचार होगा, ताकि आप लूप से पहले केवल एक बार देखें। वर्तमान में यह तत्व को हर एक विकल्प के लिए खोज रहा है।

— सुशांत -

@ सुशांत-- सेट के छोटे होने पर यह कितना बड़ा प्रदर्शन है?

— ckarbass

@ckarbass - यह निर्भर करता है कि आपका DOM कितना बड़ा है। संभावित रूप से बड़े और बहुत कम प्रयास इसे एक चर में असाइन करने के लिए, एसओ में टिप्पणी लिखने से काफी कम है!

— निक एच 247

Answer 4

jQuery

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

Comments

Optionवस्तु के बारे में पहले कभी नहीं सुना । क्या यह सभी ब्राउज़रों में बनाया गया है?

— डैरिल हेन

मैंने उपयोग करने की कोशिश की new Option, लेकिन पाया कि यह IE6 और 7. में काम नहीं किया। मेरे पास कोई कारण नहीं है, लेकिन पूर्ण jQuery के कई विकल्प काम करते हैं।

— डैरिल हेन

चयन को जोड़ने का अच्छा तरीका है। new Option('display', value, true)

— बोटकोडर

@ Mark0978 वास्तव में यह new Option('display', value, true, true)( javascriptkit.com/jsref/select.shtml )

— कार्ल हॉर्गबर्ग

Answer 5

यदि आपको पुराने IE संस्करणों का समर्थन नहीं करना है, तो Optionनिर्माणकर्ता का उपयोग स्पष्ट रूप से जाने का तरीका है, एक पठनीय और कुशल समाधान :

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

यह कार्यक्षमता के बराबर है, लेकिन इसकी तुलना में क्लीनर है:

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

Answer 6

यह अच्छा लग रहा है, पठनीयता प्रदान करता है, लेकिन अन्य तरीकों की तुलना में धीमी है।

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

Comments

क्या इसका मतलब यह नहीं है कि "सबसे तेज़" तरीका विभिन्न स्ट्रिंग भागों को अलग-अलग सरणी आइटम के रूप में सम्मिलित करेगा, बल्कि सरणी में डालने से पहले हर विकल्प के गठन को संक्षिप्त करने के बजाय, क्योंकि वे सभी वैसे भी अंत में एक के रूप में शामिल हो जाएंगे?

— कोलतार १ean

Answer 7

वृद्ध @ जोशरीरी के उत्तर का शोधन :

ऐसा लगता है कि सादा .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
);

Comments

क्या आप वैकल्पिक रूप से उपयोग $.weakmapकरने के लिए अनुमति दे सकते हैंGC

— Chef_Code

लालित्य के लिए बोनस अंक: उचित रूप से वस्तुओं की एक सरणी जोड़ने map()के append()लिए संपत्ति के साथ संयुक्त रूप से निर्माण का उपयोग करना !

— जोकेम शुल्नेक्लोपर

@joshperry मैं थोड़े निराश हूं क्योंकि मुझे तकनीकी सुधार / अपडेट की उम्मीद है।

— Сухой27

Answer 8

ये सभी उत्तर अनावश्यक रूप से जटिल लगते हैं। जो तुम्हे चाहिए वो है:

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

यह पूरी तरह से पार ब्राउज़र संगत है।

Comments

क्या यह होना चाहिए new Option(value, key);? पैरामीटर आदेश विकल्प (text_visible_part, value_behind_the_scenes) है।

— बॉब स्टीन

क्या ऐरे पुश क्रॉस-ब्राउज़र-संगत नहीं है? फिर, क्या यह अनावश्यक रूप से जटिल नहीं है, जब ऐरे पुश अधिक पठनीय है?

— बिटूलियन

Answer 9

Forwarned हो ... मैं Android 2.2 (Cyanogen 7.0.1) फोन (T-Mobile G2) पर PhoneGap 1.0.0 के साथ jQuery के मोबाइल 1.0b2 का उपयोग कर रहा हूं और काम करने के लिए .append () विधि प्राप्त नहीं कर सका। मुझे इस तरह .html () का उपयोग करना पड़ा:

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

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

Answer 10

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

मैंने कुछ परीक्षण किए हैं और मेरा मानना ​​है कि यह काम सबसे तेज है। : पी

Comments

एक ही परिणाम प्राप्त करने के अन्य तरीकों की तुलना में .each कुख्यात रूप से धीमा है। यह वही है जो मैं सोच रहा था और इस दृष्टिकोण की सिफारिश करेगा।

— एलन टेललेज़

यह दुर्भाग्यपूर्ण है कि यहां 90% विविधताएं $ .each () का उपयोग करती हैं। इसके लिए () लूप आपको बहुत कम नियंत्रण और प्रदर्शन लाभ दे सकता है, भले ही यह कम कॉम्पैक्ट हो।

— होल्डऑफ ह्यूंगर

Answer 11

Microsoft Templating दृष्टिकोण का उपयोग करते हुए एक दृष्टिकोण है जो वर्तमान में jQuery कोर में शामिल करने के प्रस्ताव के तहत है। यह सबसे अच्छा विकल्प नहीं हो सकता है तो सबसे सरल परिदृश्य के लिए templating का उपयोग करने में अधिक शक्ति है। अधिक जानकारी के लिए, स्कॉट गु की पोस्ट की विशेषताओं की रूपरेखा देखें।

पहले टेम्प्लेटिंग js फ़ाइल शामिल करें, जो गीथब से उपलब्ध है ।

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

अगला सेट-अप टेम्पलेट

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

फिर अपने डेटा के साथ .render () विधि को कॉल करें

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

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

मैंने इस दृष्टिकोण को अधिक विस्तार से ब्लॉग किया है।

Answer 12

मैंने ऐसा कुछ बनाया है, अजाक्स के माध्यम से एक ड्रॉपडाउन आइटम लोड करना । उपरोक्त प्रतिक्रिया भी स्वीकार्य है, लेकिन बेहतर प्रदर्शन के लिए जितना संभव हो उतना कम डोम संशोधन करना हमेशा अच्छा होता है।

इसलिए लूप के अंदर प्रत्येक आइटम को जोड़ने के बजाय एक लूप के भीतर आइटम को इकट्ठा करना बेहतर होता है और इसे पूरा होने के बाद इसे जोड़ना चाहिए।

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

इसे संलग्न करें,

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

या इससे भी बेहतर

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

Comments

$ ( '# select_id') एचटीएमएल (आइटम)। ठीक उसी तरह से काम किया जैसे मैं चाहता था। यह सभी ऑन्चेंज इवेंट में आइटम्स को जोड़ना चाहता है। बहुत बहुत धन्यवाद।

— दीपान्विता दास

Answer 13

सरल तरीका है:

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

Comments

मैंने पहले ही अपनी विकल्प सूची बना ली है, इसलिए चयन क्षेत्र को आबाद करना उतना ही आसान था जितना कि विलार्ड कहते हैं।

— Loony2nz

Answer 14

अन्य जवाबों में से अधिकांश eachफ़ंक्शन का उपयोग फ़ंक्शन पर पुनरावृति करने के लिए करते हैं selectValues। इसके लिए आवश्यक है कि प्रत्येक तत्व के लिए परिशिष्ट को बुलाया जाए और जब प्रत्येक को व्यक्तिगत रूप से जोड़ा जाए तो एक रिफ्लो ट्रिगर हो जाता है।

इस उत्तर को अद्यतन करने के लिए और अधिक मुहावरेदार कार्यात्मक विधि (आधुनिक जेएस का उपयोग करके) appendकेवल एक बार कॉल करने के लिए बनाई जा सकती है , जिसमें मानचित्र और एक तत्व निर्माता optionका उपयोग करके बनाए गए तत्वों की एक सरणी होती है ।Option

OptionDOM एलिमेंट का उपयोग करके फंक्शन कॉल ओवरहेड को कम करना चाहिए क्योंकि 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मानों को एक चर संख्या के तर्क के रूप में पारित करने की अनुमति देता है, हम optionतत्वों के नक्शे की सूची को पूर्वनिर्धारित कर सकते हैं और उपयोग करके उन्हें एकल कॉल में तर्क के रूप में जोड़ सकते हैं apply।

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

Answer 15

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 के साथ डायनामिक सिलेक्ट लिस्ट

Answer 16

Chrome (jQuery 1.7.1) में इस समाधान के साथ एक सॉर्टिंग समस्या है (नाम / संख्या द्वारा क्रोम प्रकार ऑब्जेक्ट गुण?) इसलिए ऑर्डर रखने के लिए (हाँ, यह ऑब्जेक्ट का दुरुपयोग है), मैंने इसे बदल दिया:

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

Answer 17

हर जगह एक ही कोड दोहराने के बजाय, मैं यह सुझाव दूंगा कि आपका अपना jQuery फ़ंक्शन लिखना अधिक वांछनीय है:

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

फिर एक विकल्प जोड़ने के लिए बस निम्नलिखित करें:

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

Comments

क्या आप विस्तृत कर सकते हैं?

— मो।

Answer 18

आप निम्न कोड के साथ सिर्फ अपने json सरणी पर पुनरावृति कर सकते हैं

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

Answer 19

यद्यपि पिछले उत्तर सभी मान्य उत्तर हैं - हो सकता है कि पहले इन सभी को एक दस्तावेजफ्रेमनेट में जोड़ना उचित हो, फिर उस दस्तावेज़ के टुकड़े को एक तत्व के रूप में जोड़ दें ...

मामले पर जॉन रेजिग के विचार देखें ...

की तर्ज पर कुछ:

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

Answer 20

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

Answer 21

अभी तक इसे करने का एक और तरीका:

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

Comments

मैं देख रहा हूं कि आपने यहां क्या किया ... आपने कैश लेने की सलाह दी $('#mySelect')तो @rocktheroad जवाब दिया ... जो भी हो, यह अधिक व्यावहारिक समाधान है

— Chef_Code

Answer 22

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 को हेरफेर करता है।

Comments

आप इस आगे का अनुकूलन और पूरी तरह से बदल कर jQuery के उपयोग से बचने कर सकते हैं $("#myselect").empty().append(opts);के साथgetElementById('myselect').innerHtml = opts;

— vahanpwns

Answer 23

यही कारण है कि मैं दो आयामी सरणी के साथ किया था है: प्रथम स्तंभ आइटम मैं, के लिए जोड़ है innerHTMLकी <option>। दूसरे स्तंभ record_id है मैं, में जोड़ने valueकी <option>:

1. पीएचपी

   $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. जावास्क्रिप्ट / अजाक्स

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

Comments

अछा लगता है। बहुत बुरा यह jQuery का उपयोग नहीं कर रहा है। साथ ही, मुझे select.options.add () विधि से पहले समस्याएँ हुई हैं। कौन सा ब्राउज़र और सटीक समस्या याद नहीं कर सकते हैं, लेकिन मैं इसे से एक रास्ता तय करने और मतभेदों के साथ jQuery सौदा करने का फैसला किया।

— डैरिल हेन

PHP और JQuerry के साथ कुल noob im, लेकिन उपरोक्त कोड सभी ब्राउज़रों में काम कर रहा है। एकमात्र समस्या - यह iPhone पर अच्छी तरह से काम नहीं कर रहा है, मैंने इसके बारे में एक सवाल पोस्ट किया है, अब तक कोई भाग्य नहीं :( stackoverflow.com/questions/11364040/…

— Salty

Answer 24

एक jQuery प्लगइन यहां पाया जा सकता है: jQuery और AJAX का उपयोग करके ऑटो-पॉपुलेटिंग बॉक्स का चयन करें ।

Answer 25

मैंने पाया कि यह सरल है और बढ़िया काम करता है।

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

Answer 26

JSON प्रारूप:

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

और Ajax सफलता पर ड्रॉपडाउन के लिए मूल्यों को आबाद करने के लिए jQuery कोड:

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
}

Answer 27

$ .Map () फ़ंक्शन का उपयोग करके, आप इसे अधिक सुरुचिपूर्ण तरीके से कर सकते हैं:

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

Comments

यह एक तरह से छोटा है, लेकिन एक समस्या यह है कि मान्य उत्तर और वैरिएशन से बचना चाहिए जो स्वीकृत उत्तर में होता है।

— डैरिल हेन

Answer 28

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

Answer 29

नीचे दी गई लाइन में अपनी HTML सेलेक्ट आईडी सेट करें। इसमें mySelectचुनिंदा तत्व की आईडी के रूप में उपयोग किया जाता है।

   var options = $("#mySelect");

फिर उस ऑब्जेक्ट को प्राप्त करें जो इस परिदृश्य में चयन है और इसे प्रत्येक लूप के लिए jquery पर सेट करता है। यह तदनुसार वस्तुओं के मूल्य और पाठ का उपयोग करेगा और इसे निम्नानुसार विकल्प चयनों में जोड़ देगा।

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

यह पाठ को विकल्प सूची के रूप में प्रदर्शित करेगा जब ड्रॉप डाउन सूची का चयन किया जाता है और एक बार पाठ का चयन करने के बाद चयनित पाठ के मूल्य का उपयोग किया जाएगा।

उदाहरण के लिए।

"1": "परीक्षण 1", "2": "परीक्षण 2",

ड्रॉप डाउन,

प्रदर्शन नाम: परीक्षण 1 -> मूल्य 1 प्रदर्शन नाम है: परीक्षण 2 -> मूल्य 2 है

Comments

कृपया समाधान के बारे में थोड़ा वर्णन करें।

— विनय प्रजापति

Answer 30

दरअसल, बेहतर प्रदर्शन पाने के लिए, अलग से विकल्प सूची बनाना बेहतर है और आईडी का चयन करना है।

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/