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




option html-select (15)

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

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

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

संपादित करें: निम्नलिखित कोड चेनिंग के साथ सहायक था। हालांकि, (इंटरनेट एक्सप्लोरर में) .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>') ;

लेकिन दोनों उत्तरों ने मुझे अपने अंतिम समाधान के लिए नेतृत्व किया ..


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

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

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

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

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

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

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

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

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


एचटीएमएल को नए डेटा में बदलने के बारे में कैसे।

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

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

$(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>


चयनित विकल्प को साफ़ करने के लिए jquery prop() का उपयोग करता है

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

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

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

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


आप एचटीएमएल को बदलकर बस कर सकते हैं

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

  1. पहले सभी एक्सिसिटिंग विकल्प को पहले निष्पादित करें (- चयन करें--) को साफ़ करें

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

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

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

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

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

here अधिक जानकारी।


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

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

मौरेटो के जवाब पर बिल्डिंग, यह पढ़ने और समझने के लिए थोड़ा आसान है:

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

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

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

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







html-select