आप एक चयनित बॉक्स के सभी विकल्पों को कैसे हटाते हैं और फिर एक विकल्प जोड़ते हैं और इसे jQuery के साथ चुनते हैं?

1077

कोर jQuery का उपयोग करते हुए, आप एक चयनित बॉक्स के सभी विकल्पों को कैसे हटाते हैं, फिर एक विकल्प जोड़ें और उसका चयन करें?

मेरा चयन बॉक्स निम्नलिखित है।

<Select id="mySelect" size="9"> </Select>

संपादित करें: निम्नलिखित कोड जंजीर के साथ मददगार था। हालाँकि, (Internet Explorer में) .val('whatever')उस विकल्प का चयन नहीं किया था जिसे जोड़ा गया था। (मैंने दोनों में एक ही 'मान' का उपयोग किया था .appendऔर .val)

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

संपादित करें: इस कोड की नकल करने के लिए इसे प्राप्त करने की कोशिश कर रहा हूं, जब भी पृष्ठ / फ़ॉर्म को रीसेट किया जाता है, मैं निम्नलिखित कोड का उपयोग करता हूं। यह चुनिंदा बॉक्स रेडियो बटन के एक सेट से आबाद है। .focus()करीब था, लेकिन विकल्प चयनित नहीं दिखाई दिया जैसा कि वह करता है .selected= "true"। मेरे मौजूदा कोड में कुछ भी गलत नहीं है - मैं सिर्फ jQuery सीखने की कोशिश कर रहा हूं।

var mySelect = document.getElementById('mySelect');
mySelect.options.length = 0;
mySelect.options[0] = new Option ("Foo (only choice)", "Foo");
mySelect.options[0].selected="true";

संपादित करें: चयनित उत्तर मेरे लिए आवश्यक था। यह मेरे लिए काम किया:

$('#mySelect').children().remove().end()
.append('<option selected value="whatever">text</option>') ;

लेकिन दोनों जवाब मुझे मेरे अंतिम समाधान तक ले गए।

— जे कॉर्बेट
स्रोत

1694

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

— मैट
स्रोत

3

@nickf: मुझे एक ही समस्या है, लेकिन मुझे ड्रॉपडाउन के बदलने पर एक के बजाय एक चेकबॉक्स का एक सेट जोड़ने की आवश्यकता है लेकिन मेरे चेकबॉक्स xml से आ रहे हैं। यह काम नहीं करता

— defau1t

10

ध्यान दें कि आप विकल्प / attr / टेक्स्ट को भी तोड़ सकते हैं:.append($("<option></option>").attr("value", '123').text('ABC!')

— ब्रॉक हेंसले

1

@BrockHensley, मेरा मानना है कि इस उत्तर की सही लालित्य अंत () फ़ंक्शन के साथ कॉम्बो में उचित श्रृंखलन है। आपका सुझाव भी काम करेगा। JQuery एपीआई दस्तावेज़ीकरण से: "jQuery के अधिकांश DOM ट्रैवर्सल तरीके jQuery ऑब्जेक्ट इंस्टेंस पर काम करते हैं और एक नया निर्माण करते हैं, DOM तत्वों के एक अलग सेट से मेल खाते हैं। जब ऐसा होता है, तो ऐसा होता है जैसे तत्वों का नया सेट स्टैक पर धकेल दिया जाता है। इसे ऑब्जेक्ट के अंदर बनाए रखा जाता है। प्रत्येक क्रमिक फ़िल्टरिंग विधि स्टैक पर सेट किए गए नए तत्व को धकेलती है। यदि हमें पुराने तत्व सेट की आवश्यकता होती है, तो हम स्टैक के बंद सेट को पॉप करने के लिए एंड () का उपयोग कर सकते हैं। "

— एंथनी मेसन

1

यह एकमात्र तरीका था जिससे मैं अपने मेनू को फिर से बना सका और iOS के लिए PhoneGap पर jQuery मोबाइल में चयनित विकल्प को बदल सका। बाद में मेनू को रिफ्रेश करना भी आवश्यक था।

— xx

3

@BrockHensley आप यहाँ तक जा सकते हैं.append($("<option></option>", {'value':'123'}).text('ABC!')

— vahanpwns

709

$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;

— Mahzilla
स्रोत

34

जिज्ञासा से बाहर, 'खोजने' की तुलना में 'खाली' तेज है? ऐसा लगता है - क्योंकि 'खोज' एक चयनकर्ता का उपयोग करेगा और 'खाली' सिर्फ जानवर बल को खाली करेगा।

— दान एस्पेरज़ा

52

@DanEsparza मैंने आपको एक jsperf बनाया; empty()बेशक तेजी से निकला;) jsperf.com/find-remove-vs-empty

— vzwick

मुझे इस समाधान के साथ एक अजीब गड़बड़ मिली। इसका पॉपुलेट भाग ठीक है, लेकिन जब मैं एक मान (मेरे मामले में एक दिन) का चयन करने का प्रयास करता हूं, तो मैं मान को लॉग इन कर सकता हूं, लेकिन चयनित फ़ील्ड में दिखाए गए मान पहले मान में रहें .... मैं कर सकता हूं। 'इसे हल करें: /

— Takscs Zsolt

5

@ TakácsZsolt शायद आपको .val('whatever')मैट के उत्तर में श्रृंखला के अंत में जोड़ना चाहिए ।

— कोडोस जॉनसन

.empty () मटेरियल के साथ काम करता है, जबकि .remove () काम नहीं करता है

— OverlordvI

127

सिर्फ सादे जावास्क्रिप्ट का उपयोग क्यों न करें?

document.getElementById("selectID").options.length = 0;

— शॉन
स्रोत

7

मैं मानता हूं कि सभी विकल्पों को हटाने के लिए यह सबसे सरल उपाय है, लेकिन यह केवल आधे प्रश्न का उत्तर देता है ...

— Elezar

2

क्या यह स्मृति रिसाव नहीं बनाएगा? विकल्प तत्व अब अप्राप्य हैं, लेकिन अभी भी आवंटित किए गए हैं।

— 19

1

सादा ओल्ड जेएस FTW (जीत के लिए) !!! :)

— त्रयोदशी

78

यदि आपका लक्ष्य पहले वाले को छोड़कर सभी विकल्पों को चुनना है (आमतौर पर 'कृपया एक आइटम चुनें' विकल्प) जिसका आप उपयोग कर सकते हैं:

$('#mySelect').find('option:not(:first)').remove();

— mauretto
स्रोत

10

इसका उत्तर होना चाहिए। सभी अन्य लोगों ने जानबूझकर पहले इसे फिर से बनाने के दृष्टिकोण के साथ हटा दिया, जो मुझे पसंद नहीं है; इसका अर्थ यह भी है कि उन्होंने पहला विकल्प भी पहले कहीं संग्रहीत किया है।

76

मेरे पास IE7 में एक बग था (IE6 में ठीक काम करता है) जहां उपरोक्त jQuery विधियों का उपयोग डोम में चयन को साफ करेगा , लेकिन स्क्रीन पर नहीं। IE डेवलपर टूलबार का उपयोग करके मैं पुष्टि कर सकता हूं कि चयन को मंजूरी दे दी गई थी और इसमें नए आइटम थे, लेकिन नेत्रहीन चयन ने अभी भी पुराने आइटम दिखाए हैं - भले ही आप उनका चयन नहीं कर सके।

फिक्स jQuery के बजाय स्पष्ट करने के लिए मानक DOM तरीकों / उचितियों (पोस्टर मूल के रूप में) का उपयोग करना था - फिर भी विकल्प जोड़ने के लिए jQuery का उपयोग करना।

$('#mySelect')[0].options.length = 0;

— ROW1
स्रोत

6

मुझे इस विधि का उपयोग ie6 में भी करना पड़ा क्योंकि .empty () ने मेरे चुनिंदा बॉक्स का कारण बना जो कि एक छिपे हुए कंटेनर में समाहित था, यहां तक कि माता-पिता के छिपे होने पर भी दिखाई देने के लिए।

— कोड कमांडर

2

यह विधि भी एक छोटा सा (लगभग 1%) अधिक प्रदर्शन करने वाली निकलती है

— vzwick

3

+1 यह सबसे अधिक पठनीय है (मेरी राय में) और jsPerf लिंक (@vzwick लिंक) में स्वीकृत उत्तर 34% धीमा था (ओपेरा 20)

— मोरवेल

35

निश्चित रूप से इसका मतलब यह नहीं है कि "एक जोड़ें और इसे चुनें", क्योंकि यह डिफ़ॉल्ट रूप से वैसे भी चुना जाएगा। लेकिन, यदि आप एक से अधिक जोड़ना चाहते हैं, तो यह अधिक समझ में आता है। कैसे कुछ के बारे में:

$('select').children().remove();
$('select').append('<option id="foo">foo</option>');
$('#foo').focus();

"EDIT" का जवाब : क्या आप स्पष्ट कर सकते हैं कि "इस चुनिंदा बॉक्स को रेडियो बटन के एक सेट से आबाद किया गया है"? एक <select>तत्व (कानूनी रूप से) में <input type="radio">तत्व नहीं हो सकते ।

— बॉबी जैक
स्रोत

27

$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;

— हेडेन चेम्बर्स
स्रोत

2

हम अभी भी IE6 का उपयोग कर रहे हैं और यह विधि काम नहीं कर रही है। हालाँकि, इसने FF 3.5.6

— Jay Corbett

3

चयन के परिवर्तन को ट्रिगर करने के लिए अंत में .change () जोड़ना होगा

— हेडन चैम्बर्स

22

$("#control").html("<option selected=\"selected\">The Option...</option>");

— jvarandas
स्रोत

12

मुझे मिले जवाबों की बदौलत, मैं निम्नलिखित चीज़ों को बनाने में सक्षम था, जो मेरी आवश्यकताओं के अनुरूप है। मेरा प्रश्न कुछ अस्पष्ट था। फॉलो करने के लिए धन्यवाद। मेरी अंतिम समस्या "चयनित" को उस विकल्प में शामिल करके हल की गई थी जिसे मैं चुना था।

$(function() {
  $('#mySelect').children().remove().end().append('<option selected value="One">One option</option>') ; // clear the select box, then add one option which is selected
  $("input[name='myRadio']").filter( "[value='1']" ).attr( "checked", "checked" ); // select radio button with value 1
  // Bind click event to each radio button.
  $("input[name='myRadio']").bind("click",
                                  function() {
    switch(this.value) {
      case "1":
        $('#mySelect').find('option').remove().end().append('<option selected value="One">One option</option>') ;
        break ;
      case "2":
        $('#mySelect').find('option').remove() ;
        var items = ["Item1", "Item2", "Item3"] ; // Set locally for demo
        var options = '' ;
        for (var i = 0; i < items.length; i++) {
          if (i==0) {
            options += '<option selected value="' + items[i] + '">' + items[i] + '</option>';
          }
          else {
            options += '<option value="' + items[i] + '">' + items[i] + '</option>';
          }
        }
        $('#mySelect').html(options);   // Populate select box with array
        break ;
    } // Switch end
  } // Bind function end
                                 ); // bind end
}); // Event listener end

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>One<input  name="myRadio" type="radio" value="1"  /></label>
<label>Two<input name="myRadio"  type="radio" value="2" /></label>
<select id="mySelect" size="9"></select>

स्निपेट का विस्तार करें

— जे कॉर्बेट
स्रोत

8

कैसे के बारे में सिर्फ नए डेटा के लिए HTML बदल रहा है।

$('#mySelect').html('<option value="whatever">text</option>');

एक और उदाहरण:

$('#mySelect').html('
    <option value="1" selected>text1</option>
    <option value="2">text2</option>
    <option value="3" disabled>text3</option>
');

— शिव
स्रोत

8

पहले स्पष्ट सभी एक्सिसिटिंग विकल्प पहले वाले को निष्पादित करते हैं (- Select--)

एक-एक करके लूप का उपयोग करके नए विकल्प मूल्यों को लागू करें

$('#ddlCustomer').find('option:not(:first)').remove();
for (var i = 0; i < oResult.length; i++) {
   $("#ddlCustomer").append(new Option(oResult[i].CustomerName, oResult[i].CustomerID + '/' + oResult[i].ID));
}

— जयदीप शील
स्रोत

7

मैंने नीचे की तरह नेट पर कुछ पाया है। मेरी स्थिति में जैसे हजारों विकल्पों के साथ यह बहुत तेजी से .empty()या से बहुत अधिक है.find().remove() jQuery से।

var ClearOptionsFast = function(id) {
    var selectObj = document.getElementById(id);
    var selectParentNode = selectObj.parentNode;
    var newSelectObj = selectObj.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelectObj, selectObj);
    return newSelectObj;
}

अधिक जानकारी यहाँ ।

— marioosh
स्रोत

7

दूसरा रास्ता:

$('#select').empty().append($('<option>').text('---------').attr('value',''));

इस लिंक के तहत, अच्छी प्रैक्टिस हैं https://api.jquery.com/select/

— झोन इंट्रीगो थोथ
स्रोत

7

$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

कोड की पहली पंक्ति एक चयनित बॉक्स के सभी विकल्पों को हटा देगी क्योंकि कोई विकल्प नहीं मानदंड का उल्लेख किया गया है।

कोड की दूसरी पंक्ति निर्दिष्ट मान ("टेस्टवैल्यू") और टेक्स्ट ("टेस्टटेक्स्ट") के साथ विकल्प जोड़ देगी।

— देव चौहान
स्रोत

यदि यह प्रश्न का उत्तर दे सकता है, तो यह बहुत अधिक उपयोगी होगा यदि आप एक स्पष्टीकरण प्रदान करते हैं कि यह कैसे उत्तर देता है।

— निक

6

Mauretto के उत्तर पर निर्माण, यह पढ़ना और समझना थोड़ा आसान है:

$('#mySelect').find('option').not(':first').remove();

विशिष्ट मूल्य वाले एक को छोड़कर सभी विकल्पों को हटाने के लिए, आप इसका उपयोग कर सकते हैं:

$('#mySelect').find('option').not('[value=123]').remove();

यह बेहतर होगा यदि जोड़ा जाने वाला विकल्प पहले से ही था।

— humbads
स्रोत

4

चयनित विकल्प को खाली करने के लिए jquery प्रोप () का उपयोग करता है

$('#mySelect option:selected').prop('selected', false);

— mehrdad
स्रोत

1

.prop () केवल jQuery 1.6+ में लागू होता है। JQuery के 1.5- के लिए, .attr ()

— Agi Hammerthief

4

यह आपके मौजूदा mySelect को नए mySelect से बदल देगा।

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');

— वरुण
स्रोत

4

आप html की जगह बस कर सकते हैं

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');

— नदीम मंज़ूर
स्रोत

4

सिलेक्ट टैग से सभी विकल्पों को हटाने के लिए सिर्फ एक लाइन और आप किसी भी विकल्प को जोड़ने के बाद विकल्पों को जोड़ने के लिए दूसरी पंक्ति बना सकते हैं।

$('.ddlsl').empty();

$('.ddlsl').append(new Option('Select all', 'all'));

— कौशिक श्रीमाली
स्रोत

2

एक वस्तु में जोड़ा जा करने के लिए विकल्प मान सहेजें
चुनिंदा टैग में मौजूदा मौजूदा विकल्प साफ़ करें
सूची ऑब्जेक्ट को पुनरावृत्त करें और सामग्री को इच्छित चयन टैग में जोड़ें

var listToAppend = {'':'Select Vehicle','mc': 'Motor Cyle', 'tr': 'Tricycle'};

$('#selectID').empty();

$.each(listToAppend, function(val, text) {
    $('#selectID').append( new Option(text,val) );
  });

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

स्निपेट का विस्तार करें

— निफेमी सोला-ओजो
स्रोत

2

मैंने इस कोड को Select2 - क्लियरिंग सिलेक्शन में देखा

$('#mySelect').val(null).trigger('change');

यह कोड jQuery के साथ भी Select2 के बिना अच्छी तरह से काम करता है

— michael01angelo
स्रोत

1

आशा है कि यह काम करेगा

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));

— एमडी रसेल हुसैन
स्रोत

यह काम करता है अगर अधिक तो विकल्प मैं दूसरे का चयन नहीं कर सकता

— Anburaj_N

0

var select = $('#mySelect');
select.find('option').remove().end()
.append($('<option/>').val('').text('Select'));
var data = [{"id":1,"title":"Option one"}, {"id":2,"title":"Option two"}];
for(var i in data) {
    var d = data[i];
    var option = $('<option/>').val(d.id).text(d.title);
    select.append(option);
}
select.val('');

— एलएन निठारसन
स्रोत