JQuery का उपयोग करके <select> के विकल्पों को जोड़ना?

Question

optionJQuery का उपयोग करते हुए ड्रॉपडाउन में जोड़ने का सबसे आसान तरीका क्या है ?

यह काम करेगा?

$("#mySelect").append('<option value=1>My option</option>');

Comments

या $("#mySelect").html(....)वर्तमान विकल्पों को नए के साथ बदलने के लिए उपयोग करें।

— दान डिप्लो

Answer 1

यह IE8 में काम नहीं किया (अभी तक एफएफ में किया था):

$("#selectList").append(new Option("option text", "value"));

यह काम:

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Comments

मुझे IE8 में समस्या हो रही थी, लेकिन आपके कोड ने मेरे लिए काम किया, धन्यवाद!

— एलेक्जेंडर एल

यह भी सुनिश्चित करें कि display: table;है नहीं चयन तत्व के लिए शैली के रूप में लागू होता है। यह js-code

— Gundon

यदि आप रुचि रखते हैं, तो यहां बग संबंधित विकल्पों के साथ काम नहीं करता है (फायरफॉक्स, क्रोम में कैसे काम करता है), लेकिन IE में नहीं: बगs.jquery.com/ticket/1641

— जैकडेव

+1 - वस्तु को Work विनियोजित ’किए बिना मेरे लिए काम किया। var o = new Option('option text', 'value'); o.innerHTML = 'option text'; document.getElementById('selectList').appendChild(o);

— ऑस्ट

इसमें "डेटा-xxx" मान जोड़ने का एक तरीका है?

— पेड्रो जोक्विन

Answer 2

व्यक्तिगत रूप से, मैं विकल्प विकल्पों के लिए इस वाक्यविन्यास को प्राथमिकता देता हूं:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

यदि आप आइटम के संग्रह से विकल्प जोड़ रहे हैं, तो आप निम्न कार्य कर सकते हैं:

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

Comments

यह काफी धीमा होगा यदि आप बहुत सारे विकल्प जोड़ रहे हैं, बस एक html स्ट्रिंग बनाने और इसे

— अपग्रेड

IE में बहुत सारे समाधानों के विपरीत काम करता है

— DancesWithBamb

@ रोपitems={option1:{value:1,text:1},option2:{value:2,text:2}}

— गमलीला

धन्यवाद @ @, लेकिन मैं डिफ़ॉल्ट रूप से चयनित नए विकल्प कैसे बना सकता हूं?

— लॉर्ड_जैबा

{चयनित: सच}

— jmadsen

Answer 3

आप सिंटैक्स का उपयोग करके विकल्प जोड़ सकते हैं, इसके अलावा आप अधिक विवरण के लिए jQuery में हैंडल विकल्प को देखने के लिए भी जा सकते हैं ।

1. $('#select').append($('<option>', {value:1, text:'One'}));

2. $('#select').append('<option value="1">One</option>');

3. var option = new Option(text, value); $('#select').append($(option));

Comments

पहले वाले को $ ("# सेक्शननाम") में बदलना चाहिए। परिशिष्ट ($ ('<विकल्प>', {मूल्य: 1, पाठ: "एक"})

— एथेनहाइ

दूसरे में विकल्प टैग ( valueइसके बजाय val) में एक गलत विशेषता है । सही कोड होना चाहिए$('select').append('<option value="1">One</option>');

— टोड

धन्यवाद दीपू :))

— फॉक्स

Answer 4

यदि विकल्प नाम या मान गतिशील है, तो आप इसमें विशेष वर्णों से बचने के बारे में चिंता नहीं करना चाहेंगे; इसमें आप साधारण DOM तरीके पसंद कर सकते हैं:

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

Comments

मुझे इतना आसान नहीं लगता है !!

— Upvote

यह जावास्क्रिप्ट शब्दों में सरल है, jquery ने लोगों के लिए चीजों को बहुत आसान बना दिया है

— DWolf

document.getElementById ('mySelect') जोड़ें (नया विकल्प ('मेरा विकल्प', '1')); // अगर IE8 या बेहतर

— Hafthor

Answer 5

विकल्प 1-

आप यह कोशिश कर सकते हैं-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

ऐशे ही-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

विकल्प 2-

या यह कोशिश करें-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

ऐशे ही-

for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

Answer 6

यह बहुत सरल है:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

या

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));

Answer 7

यह अच्छा काम करता है।

यदि एक से अधिक विकल्प तत्व जोड़ते हैं, तो मैं प्रत्येक तत्व पर एक परिशिष्ट के विरोध के रूप में एक बार एपेंड करने की सलाह दूंगा।

Answer 8

जो भी कारण $("#myselect").append(new Option("text", "text"));मेरे लिए IE7 + में काम नहीं कर रहा है

मुझे इस्तेमाल करना था $("#myselect").html("<option value='text'>text</option>");

Comments

मैं एंड्रॉयड क्रोम ब्राउज़र पर है कि एक ही वाक्य रचना (नया विकल्प (...) (क फोन पर उपयोग कर रहा हूँ) है और यह वहाँ या तो काम नहीं कर रहा।

— raddevus

Answer 9

प्रदर्शन में मदद करने के लिए आपको केवल एक बार DOM को बदलने की कोशिश करनी चाहिए, और भी अधिक अगर आप कई विकल्प जोड़ रहे हैं।

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

Comments

प्रदर्शन में मदद करने के लिए आपको string.join()तार का उपयोग करना चाहिए

— mfeineis

यह एक बेहतरीन उपाय है। उदाहरण में "जॉइन ()" के साथ एक समस्या थी जो एक वैध फ़ंक्शन नहीं है, लेकिन यह समाधान आपको यह निर्धारित करने के लिए एक jQuery "वादा" का उपयोग करने की अनुमति देता है जब सभी विकल्प जोड़े गए हैं और डोम अपडेट कर रहे हैं। एक के बाद एक विकल्पों को जोड़ने वाले अन्य समाधानों के साथ, यह आसानी से नहीं किया जा सकता है। DOM मॉडिफिकेशन के पूरा होने के बाद ही एक्शन लेने के लिए अंतिम पंक्ति को उदाहरण में बदलें: $ .when ($ (# # select ')। परिशिष्ट (html) );

— अमेरिका

Answer 10

$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

Comments

जब तक मैं गलत नहीं हूँ, इस समाधान के लिए न केवल jQuery की आवश्यकता है, बल्कि jQueryUI भी है। selectmenu()jQuery कोर का हिस्सा नहीं है और एक jQueryUI विजेट है । यह एक बहुत भारी हाथ समाधान बनाता है, नहीं?

— ताटलार

Answer 11

मुझे नॉन जक्वेरी अप्रोच का उपयोग करना पसंद है:

mySelect.add(new Option('My option', 1));

Comments

मुझे यह पसंद है कि यह गैर-jquery हो रहा है;) वह भी अक्सर न देखें

— डकैकर

हाँ, और यद्यपि मैं jquery की शक्ति पर सवाल नहीं उठा सकता, ऐसे मामले हैं जो चीजों को सरल नहीं करते हैं।

— caiohamamura

Answer 12

आप नीचे दिए गए उदाहरण में दिखाए गए ड्रॉपडाउन में गतिशील रूप से विकल्प जोड़ सकते हैं। यहाँ इस उदाहरण में मैंने सरणी डेटा लिया है और उन सरणी मान को ड्रॉपडाउन में बाँधा है जैसा कि आउटपुट स्क्रीनशॉट में दिखाया गया है

आउटपुट:

var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     myselect.append( $('<option></option>').val(key).html(key) );
       });
      $('#selectCity').append(myselect.html());
});

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
</script>

<select  id="selectCity">

</select>

Answer 13

किसी भी उत्तर में उल्लेख नहीं किया गया है, लेकिन उपयोगी वह मामला है जहां आप चाहते हैं कि विकल्प भी चुना जाए, आप जोड़ सकते हैं:

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

Comments

धन्यवाद, मुझे json से उत्पन्न एक विकल्प को पसंद करने की आवश्यकता है और यह अच्छी तरह से काम करता है।

— जॉर्ज पाटशाइडर

Answer 14

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

Answer 15

इसके दो तरीके हैं। आप इन दोनों में से किसी एक का उपयोग कर सकते हैं।

प्रथम:

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

दूसरा:

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

Answer 16

यदि आप चयन में एक विशिष्ट सूचकांक में नया विकल्प सम्मिलित करना चाहते हैं:

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

यह चयन में 3 आइटम के रूप में "नया आइटम" सम्मिलित करेगा।

Answer 17

आप पाठ के साथ मूल्य विशेषता को जोड़ सकते हैं और सेट कर सकते हैं:

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

Answer 18

जब आप विकल्प जोड़ते हैं और jquery सत्यापन का उपयोग करते हैं तो हमें कुछ समस्या मिली। आपको चुनिंदा कई सूची में एक आइटम पर क्लिक करना होगा। आप इस कोड को संभालेंगे:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected

Answer 19

इस बारे में कैसा है

var numbers = [1, 2, 3, 4, 5];
var option = '';

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

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

Answer 20

यह सर्वश्रेष्ठ प्रदर्शन के लिए सिर्फ एक त्वरित बिंदु है

हमेशा जब आप कई विकल्पों के साथ काम कर रहे होते हैं, तो एक बड़ी स्ट्रिंग का निर्माण करें और फिर इसे सर्वश्रेष्ठ प्रदर्शन के लिए 'चयन' में जोड़ें

FG

var $ mySelect = $ ('# mySelect'); var str = '';

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

और भी तेज

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

Answer 21

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

यदि आप किसी वस्तु से डेटा प्राप्त कर रहे हैं, तो बस उस वस्तु को कार्य करने के लिए अग्रेषित करें ...

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

नाम और आईडी ऑब्जेक्ट प्रॉपर्टीज के नाम हैं ... इसलिए आप उन्हें जो चाहें कॉल कर सकते हैं ... और अगर आपके पास ऐरे हैं ... आप लूप के लिए कस्टम फ़ंक्शन बनाना चाहते हैं ... और फिर उस फ़ंक्शन को कॉल करें दस्तावेज तैयार ... चीयर्स

Answer 22

वस्तुओं के संग्रह को लागू करने के लिए विधिवत जवाब के आधार पर , एक-लाइनरfor...in भी अद्भुत काम करेगा:

let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

ऑब्जेक्ट ऑब्जेक्ट और इंडेक्स दोनों को विकल्पों को सौंपा गया है। यह समाधान पुराने jQuery (v1.4) में भी काम करता है !

Answer 23

यदि u है optgroup अंदर का चयन , यू डोम में त्रुटि मिली।

मुझे सबसे अच्छा तरीका लगता है:

$("#select option:last").after($('<option value="1">my option</option>'));

Answer 24

यू विकल्प के लिए संलग्न करने के लिए नीचे कोड की कोशिश कर सकते हैं

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

Answer 25

$('#select_id').append($('<option>',{ value: v, text: t }));

Answer 26

यह वह तरीका है जो मैंने किया था, जिसमें प्रत्येक चयनित टैग जोड़ने के लिए एक बटन था।

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

Comments

क्या यह होना चाहिए$(document).ready(function(){ $("#button").click(function() { $('#id_table_AddTransactions').append('<option></option>'); }); });

— बरिक धर्मवान

हां, आप इसके बारे में सही हैं। मेरे उत्तर में तैयार कथन शामिल नहीं था, क्योंकि मैंने इस मुद्दे को हल करने पर ध्यान केंद्रित किया था।

— रोनाल्ड वालेरा संताना

Answer 27

आप इसे ES6 में कर सकते हैं:

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

Answer 28

अगर कोई यहां आता है तो डेटा प्रॉपर्टीज के साथ विकल्प जोड़ने का रास्ता खोजता है

Attr का उपयोग करना

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

डेटा का उपयोग करना - संस्करण 1.2.3 जोड़ा गया

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);