किसी आइटम को किसी चयन बॉक्स से निकालना

Question

मैं किस आइटम को आइटम से हटाऊं, या आइटम का चयन करूं? मैं jQuery चला रहा हूं, जिससे काम आसान हो जाए। नीचे एक उदाहरण चयन बॉक्स है।

<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>    
</select>

Answer 1

एक विकल्प निकालें:

$("#selectBox option[value='option1']").remove();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>	
</select>

एक विकल्प जोड़ें:

$("#selectBox").append('<option value="option5">option5</option>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>	
</select>

Comments

यदि आपको किसी विकल्प को हटाने और किसी अन्य का चयन करने की आवश्यकता है: $ ('# selectBox')। Val ('विकल्प 2')। ('विकल्प [value = "option1"]') खोजें। हटाएं ()।

— राडू मारिस

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

— टैक्रॉय

Answer 2

आप इसके साथ चयनित आइटम को हटा सकते हैं:

$("#selectBox option:selected").remove();

यदि आपके पास सूची है और ड्रॉपडाउन नहीं है तो यह उपयोगी है।

Comments

यह मेरे लिए सब कुछ हटा रहा है ... रुको मैं कई विशेषताओं के साथ चयन का उपयोग कर रहा हूं। मैं इसे कई चुनिंदा से कैसे निकाल सकता हूं?

— अक्षय

Answer 3

window.onload = function ()
{   
    var select = document.getElementById('selectBox');
    var delButton = document.getElementById('delete');

    function remove()
    {
        value = select.selectedIndex;
        select.removeChild(select[value]);
    }

    delButton.onclick = remove;    
}

आइटम जोड़ने के लिए मैं दूसरा चयन बॉक्स बनाऊंगा और:

var select2 = document.getElementById('selectBox2');
var addSelect = document.getElementById('addSelect');

function add()
{
    value1 = select2.selectedIndex;
    select.appendChild(select2[value1]);    
}

addSelect.onclick = add;

हालांकि jQuery नहीं।

Comments

@ जेबीटन: 4 साल पहले लिखे इस लेख को देख कर मुझे खुद पर हंसी आई और आप सही हैं :)

— एड्रियाना

Answer 4

किसी आइटम को निकालने के लिए

$("select#mySelect option[value='option1']").remove(); 

एक आइटम जोड़ने के लिए

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

एक विकल्प के लिए जाँच करने के लिए

$('#yourSelect option[value=yourValue]').length > 0;

एक चयनित विकल्प को हटाने के लिए

$('#mySelect :selected').remove(); 

Answer 5

यह करना चाहिए:

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

Answer 6

मुझे jQuery का चयन बॉक्स हेरफेर प्लगइन लगता है इस प्रकार की चीज़ के लिए उपयोगी है।

आप आसानी से सूचकांक, मूल्य, या regex द्वारा एक आइटम निकाल सकते हैं।

removeOption(index/value/regex/array[, selectedOnly])

Remove an option by
- index: $("#myselect2").removeOption(0);
- value: $("#myselect").removeOption("Value");
- regular expression: $("#myselect").removeOption(/^val/i);
- array $("#myselect").removeOption(["myselect_1", "myselect_2"]);

सभी विकल्पों को हटाने के लिए, आप कर सकते हैं $("#myselect").removeOption(/./);।

Comments

-1 क्योंकि यह jQuery और बुनियादी प्रोग्रामिंग का उपयोग करके w / oa प्लगइन किया जा सकता है।

— स्लोपसाइड क्रिएटिव

ᕀ 1 पहिया को क्यों मजबूत करते हैं

— जॉन हस्कल

Answer 7

हार्ड-कोड के बिना गतिशील रूप से मूल्य जोड़ना / निकालना:

// गतिशील रूप से चयन से मूल्य निकालें

$("#id-select option[value='" + dynamicVal + "']").remove();

// चयन करने के लिए गतिशील मूल्य जोड़ें

$("#id-select").append('<option value="' + dynamicVal + '">' + dynamicVal + '</option>');

Answer 8

मुझे दो पृष्ठ मिले जो मददगार लगते हैं, यह ASP.Net के लिए लिखा गया है, लेकिन एक ही सामान लागू होना चाहिए:

1. JQuery का उपयोग करके ड्रॉपडाउन सूची से आइटम कैसे जोड़ें / निकालें
2. jQuery चयनकर्ता भाव

Answer 9

निम्नलिखित लिंक मददगार होंगे-

http://api.jquery.com/remove/

http://api.jquery.com/append/

Answer 10

बस किसी को भी देखने के लिए इसे बढ़ाने के लिए, आप भी बस करने में सक्षम हैं:

$("#selectBox option[value='option1']").hide();

तथा

$("#selectBox option[value='option1']").show();

Comments

मुझे लगता है कि यह भिन्न ब्राउज़र पर निर्भर करता है। यह सिर्फ उस विशेष विकल्प को निष्क्रिय कर सकता है।

— एडम वेयर

मैं इस विधि की अनुशंसा नहीं करता, क्योंकि यह ब्राउज़र विशिष्ट है।

— स्कॉट शॉ-स्मिथ

यह एक पुरानी पोस्ट है लेकिन मैं इस पर टिप्पणी करना चाहूंगा। यद्यपि यह चुनिंदा विकल्प से निपटने का एक बहुत अच्छा तरीका है, यह अनुशंसित नहीं है क्योंकि IE इसका समर्थन नहीं करता है

— अहमद अली

Answer 11

जावास्क्रिप्ट

function removeOptionsByValue(selectBox, value)
{
  for (var i = selectBox.length - 1; i >= 0; --i) {
    if (selectBox[i].value == value) {
      selectBox.remove(i);
    }
  }
}

function addOption(selectBox, text, value, selected)
{
  selectBox.add(new Option(text, value || '', false, selected || false));
}

var selectBox = document.getElementById('selectBox');

removeOptionsByValue(selectBox, 'option3');
addOption(selectBox, 'option5', 'option5', true);

<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>	
</select>

jQuery

jQuery(function($) {
  $.fn.extend({
    remove_options: function(value) {
      return this.each(function() {
        $('> option', this)
          .filter(function() {
            return this.value == value;
          })
          .remove();
      });
    },
    add_option: function(text, value, selected) {
      return this.each(function() {
        $(this).append(new Option(text, value || '', false, selected || false));
      });
    }
  });
});

jQuery(function($) {
  $('#selectBox')
    .remove_options('option3')
    .add_option('option5', 'option5', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="selectBox" id="selectBox">
    <option value="option1">option1</option>
    <option value="option2">option2</option>
    <option value="option3">option3</option>
    <option value="option4">option4</option>	
</select>

Answer 12

मुझे पहले विकल्प का चयन करना था, जिसमें कोई भी आईडी न हो, केवल एक वर्ग, इसलिए मैंने इस कोड का सफलतापूर्वक उपयोग किया:

$('select.validation').find('option:first').remove();

Answer 13

मैं सिर्फ एक जोड़ने का एक और तरीका सुझाना चाहता हूं option। इसके बजाय valueऔर textएक स्ट्रिंग के रूप में एक भी कर सकते हैं:

var option = $('<option/>')
                  .val('option5')
                  .text('option5');

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

गतिशील रूप से विकल्पों के मूल्यों और ग्रंथों को जोड़ते समय यह एक कम त्रुटि वाला समाधान है।

Comments

मैं नीच नहीं हूं, लेकिन ऐसा प्रतीत होता है कि आपने ओपी आधे रास्ते का जवाब दिया कि कैसे एक विकल्प जोड़ें, लेकिन कैसे एक विकल्प को हटाने के लिए नहीं।

— जॉन ओडोम

Answer 14

अगर किसी को किसी चयन के अंदर सभी विकल्पों को हटाने की आवश्यकता है , तो मैंने एक litle फ़ंक्शन किया।

मुझे उम्मीद है कि आप इसे उपयोगी पाएँ

var removeAllOptionsSelect = function(element_class_or_id){
    var element = $(element_class_or_id+" option");
    $.each(element,function(i,v){
        value = v.value;
        $(element_class_or_id+" option[value="+value+"]").remove(); 
    })
}

केवल दौड़ना है

removeAllOptionsSelect("#contenedor_modelos");

Comments

परिणाम के बराबर नहीं है $('#contenedor_modelos').empty();? हालांकि कुछ कार्रवाई देख कर अच्छा लगा :)

— MineSweeper

Answer 15

यह चुनिंदा बॉक्स html है

<select name="selectBox" id="selectBox">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

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

$("#selectBox option[value='option1']").remove();
$("#selectBox").append('<option value="option1">Option</option>');

कभी-कभी हमें चुनिंदा बॉक्स से छिपाने और विकल्प दिखाने की आवश्यकता होती है, लेकिन हटा नहीं तो आप इस कोड का उपयोग कर सकते हैं

 $("#selectBox option[value='option1']").hide();
 $("#selectBox option[value='option1']").show();

कुछ समय बाद चयनित बॉक्स से चयनित विकल्प को हटाने की आवश्यकता है

$('#selectBox :selected').remove();
$("#selectBox option:selected").remove();

जब आपको सभी विकल्प को हटाने की आवश्यकता होगी तब यह कोड

('#selectBox').empty();

जब पहले विकल्प की जरूरत होती है या अंतिम तब इस कोड की

$('#selectBox').find('option:first').remove();
$('#selectBox').find('option:last').remove();