JQuery के साथ <select> के विकल्प कैसे बदलें?

271

मान लीजिए कि विकल्पों की एक सूची उपलब्ध है, तो आप <select>नए <option>एस के साथ कैसे अपडेट करेंगे ?

jquery html-select

599

आप emptyविधि का उपयोग करके मौजूदा विकल्पों को हटा सकते हैं , और फिर अपने नए विकल्प जोड़ सकते हैं:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

यदि आपके पास किसी वस्तु में आपके नए विकल्प हैं:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

संपादित करें: सभी विकल्पों को हटाने के लिए, लेकिन पहले, आप :gtचयनकर्ता का उपयोग कर सकते हैं , optionशून्य से अधिक के साथ सभी तत्वों को प्राप्त करने के लिए और removeउन्हें:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first

— सीएमएस
स्रोत

2

खाली होने पर पहला विकल्प कैसे रहें ()?

— मास्क

2

यदि बूटस्ट्रैप-चयन का उपयोग किया जाता है, तो विकल्पों को बदलने के बाद चयन पिकर को ताज़ा करने के लिए निम्नलिखित जोड़ें $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');:। अन्यथा नए विकल्प आपकी चयनित सूची में दिखाई नहीं देंगे।

— phn

मैं इनमें से किसी एक विकल्प की जांच कैसे कर सकता हूं?

— दारोज

मैं व्यक्तिगत रूप से इस वाक्यविन्यास को jQuery नोड बनाने के लिए थोड़ा साफ करता $el.append($('<option/>', { value: value, text: key }));

— हूं

धन्यवाद दोस्तों। यदि आपको चयनित मान सेट करना है, जब हम पृष्ठ को डिफ़ॉल्ट चयनित मूल्य के लिए संपादित कर रहे हैं, तो हम विशिष्ट पुनरावृत्ति के लिए लूप में कुछ इस तरह का उपयोग कर सकते हैं, हम चयनित $ el.append ($ ('<विकल्प />'), {मान} जोड़ सकते हैं : मूल्य, चयनित: 'चयनित', पाठ: कुंजी}));

— डेवलपर

79

मैंने एक त्वरित jQuery एक्सटेंशन में CMS के उत्कृष्ट उत्तर को फेंक दिया:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

यह वस्तुओं की एक सरणी की उम्मीद करता है जिसमें "पाठ" और "मूल्य" कुंजी शामिल हैं। इसलिए उपयोग निम्नानुसार है:

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);

— ktusznio
स्रोत

14

$('#comboBx').append($("<option></option>").attr("value",key).text(value));

जहाँ comboBx आपकी कॉम्बो बॉक्स आईडी है।

या आप पहले से मौजूद इनर HTML के लिए स्ट्रिंग के रूप में विकल्प जोड़ सकते हैं और फिर चुनिंदा इनर HTML को असाइन कर सकते हैं।

संपादित करें

यदि आपको पहला विकल्प रखने और अन्य सभी को हटाने की आवश्यकता है, तो आप उपयोग कर सकते हैं

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);

— राहुल
स्रोत

आपने पुराने विकल्प नहीं निकाले?

— मास्क

क्या आप पुराने को साफ़ करना चाहते हैं ओ मौजूदा विकल्पों में नए विकल्प जोड़ें?

— राहुल

5

किसी अजीब कारण के लिए यह हिस्सा

$el.empty(); // remove old options

सीएमएस समाधान से मेरे लिए काम नहीं किया, इसलिए इसके बजाय मैंने बस इसका उपयोग किया है

el.html(' ');

और यह काम करता है। तो मेरा काम कोड अब इस तरह दिखता है:

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

— ड्रेको
स्रोत

3

DOM एलिमेंट को हटाना और जोड़ना मौजूदा के संशोधन की तुलना में धीमा है।

यदि आपके विकल्प सेट की लंबाई समान है, तो आप ऐसा कुछ कर सकते हैं:

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

यदि आपके नए विकल्प के सेट की लंबाई अलग-अलग है, तो आप ऊपर बताए गए कुछ तकनीक का उपयोग करके, खाली विकल्पों को हटा सकते हैं, जिनकी आपको वास्तव में आवश्यकता है।

— यूरी गोर
स्रोत

1

यदि उदाहरण के लिए आपके HTML कोड में यह कोड है:

<select id="selectId"><option>Test1</option><option>Test2</option></select>

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

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);

ऊपर के इस उदाहरण में, मैं केवल एक नए विकल्प द्वारा पुरानी सूची के विकल्प को बदलता हूं ।

— बर्गुइगा मोहम्मद अमीन
स्रोत

1

ओपी को इसकी कोशिश क्यों करनी चाहिए? कृपया आपने जो किया और क्यों किया, इसका विवरण केवल ओपी के लिए ही नहीं बल्कि भविष्य के आगंतुकों के लिए एसओ के लिए भी करें।

— जय ब्लैंचर्ड

1

क्या यह मदद करता है?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;

— vierzehn
स्रोत

3

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

— sisve

1

हाथ से चीजें करने का पुराना स्कूल हमेशा मेरे लिए अच्छा रहा है।

चयन को साफ़ करें और पहला विकल्प छोड़ें:

    $('#your_select_id').find('option').remove()
    .end().append('<option value="0">Selec...</option>')
    .val('whatever');

यदि आपका डेटा Json या जो भी आता है (केवल डेटा को संक्षिप्त करें):

    var JSONObject = JSON.parse(data);
    newOptionsSelect = '';
    for (var key in JSONObject) {
        if (JSONObject.hasOwnProperty(key)) {
            var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
        }
    }

    $('#your_select_id').append( newOptionsSelect );

माई जसन ओब्जेक्ट:

    [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

यह समाधान Ajax के साथ काम करने के लिए आदर्श है, और एक डेटाबेस से Json में जवाब देता है।

— टोटो
स्रोत

0

अगर हम <select>लगातार अपडेट करते हैं और हमें पिछले मूल्य को बचाने की आवश्यकता है:

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');

— रोमन याकोविव
स्रोत