ड्रॉपडाउन बॉक्स में मैं सभी विकल्प कैसे साफ़ करूं?

Question

मेरा कोड IE में काम करता है, लेकिन सफारी, फ़ायरफ़ॉक्स और ओपेरा में टूट जाता है। (बड़ा आश्चर्य)

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

खोज करने के बाद, मुझे पता चला है कि यह length=0ऐसा है जो इसे पसंद नहीं करता है।
मैंने कोशिश की है ...options=nullऔर var clear=0; ...length=clearउसी परिणाम के साथ।

मैं एक समय में कई वस्तुओं के लिए कर रहा हूं, इसलिए मैं कुछ हल्के जेएस कोड की तलाश कर रहा हूं।

Comments

करने के लिए नष्ट कर सभी विकल्प (!?), और के बारे में ताज़ा पेज के बाद चयनित विकल्पों में से ब्राउज़र का इतिहास रीसेट, एचटीएमएल के उपयोग करने के लिए <option selected>?? (google ने हमें यहाँ रखा है लेकिन यह यहाँ नहीं है) ... Document.getElementById ("form1") देखें। रीसेट () वास्तविक समाधान।

— पीटर क्रूस

Answer 1

आप सभी तत्वों को साफ़ करने के लिए निम्नलिखित का उपयोग कर सकते हैं।

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = length-1; i >= 0; i--) {
  select.options[i] = null;
}

Comments

MooTools भी है empty(), तो आप क्या करेंगे$("DropList").empty();

— ब्रायन कोसर

यह एक बुरे विचार की तरह लगता है - वस्तुओं को अशक्त करने के लिए उन्हें हटाने के समान नहीं है।

यह एक्सपेक्टेड के रूप में भी काम नहीं करता है। जब मैं उस कोड का उपयोग करता हूं तो यह ड्रॉपडाउन में एक ऑब्जेक्ट छोड़ देता है।

— गबरजन

यह कोड क्रैश हो सकता है। लूप को रिवर्स में चलाने का सबसे सुरक्षित तरीका।

— कंगना

ऐसा करने के बेहतर तरीके के लिए अन्य उत्तरों की जाँच करें।

— टिम कैवनुआग

Answer 2

HTML तत्व के विकल्पों को हटाने के लिए select, आप इस remove()विधि का उपयोग कर सकते हैं :

function removeOptions(selectElement) {
   var i, L = selectElement.options.length - 1;
   for(i = L; i >= 0; i--) {
      selectElement.remove(i);
   }
}

// using the function:
removeOptions(document.getElementById('DropList'));

optionsपीछे की तरफ हटाना महत्वपूर्ण है ; चूंकि remove()विधि optionsसंग्रह को पुनर्व्यवस्थित करती है । इस तरह, यह गारंटी है कि हटाया जाने वाला तत्व अभी भी मौजूद है!

Comments

उस @ फ़ाबियानो के लिए चीयर्स, यह वास्तव में अन्य सुझावों के विपरीत वस्तुओं को हटा देता है।

— कांस्टेंट

यहाँ कुंजी है selectbox.options के पीछे की ओर पीछे की ओर। मुझे लगता है .... जब मैं आगे की ओर जाने की कोशिश की तो यह समाधान विफल हो गया

— scottysseus

हां, यह विफल हो जाएगा क्योंकि हटाने () विधि सरणी को पुनर्व्यवस्थित करेगी। इसे पीछे की ओर करने से यह गारंटी मिलेगी कि निकाले जाने वाले तत्व का अस्तित्व होगा।

— फैबियानो

Selectbox.options.length = 0 जोड़ना; परिभाषा के अंत में यह सभी ब्राउज़रों में परिपूर्ण हो सकता है।

— ओंकार सर

सरल कोड है जबकि (selectEl.options.length) selectEl.options.remove (0)

— MiF

Answer 3

यदि आप एक हल्की स्क्रिप्ट की इच्छा रखते हैं, तो jQuery के लिए जाएं। JQuery में, सभी विकल्पों को हटाने का समाधान इस प्रकार होगा:

$("#droplist").empty();

Comments

मेरा तर्क है कि jQuery जोड़ने का बहुत ही कार्य "हल्के" के विपरीत है जब for (a in select.options) { select.options.remove(0); }काम ठीक होता है।

— अर्टोग

ये संदर्भ पर निर्भर करता है। एक वेब अनुप्रयोग में, पठनीयता सौ $("#droplist").empty();प्रकार की कोड की हजारों लाइनों की तुलना में वेनिला जेएस इसे अच्छी तरह से जोड़ के लायक बनाता है। यदि हम एक साधारण वेबपेज के लिए मार्कअप / कॉस्मेटिक्स की बात कर रहे हैं, तो आप 100% सही हैं।

— हाफ_डुप्लेक्स

@AdamIngmansson जब लोगों ने JQuery के उपयोग को बदनाम किया, तो मुझे यह अजीब लगा। मैं इस तरह की एक विधि का उपयोग इस धारणा पर करूंगा कि JQ के पीछे के इंजीनियरों ने किसी दिए गए (उपयोगिता) कार्य को करने के लिए सबसे अच्छे, सबसे तेज़ और सबसे अधिक विश्वसनीय साधनों को खोजने के लिए सभी प्रकार के परीक्षण किए हैं। JQ (या किसी भी अच्छी लाइब्रेरी) का बिंदु सांसारिक कार्यों को लेना है ताकि आप दिलचस्प चीजों पर ध्यान केंद्रित कर सकें।

— माइक कृंतक

@mikerodent मुझे इसमें कोई संदेह नहीं है कि फ़ंक्शन स्वयं उच्च गुणवत्ता और प्रदर्शन का है। लेकिन सिर्फ उस छोटे से फंक्शन के लिए 86kb (वर्जन 3.2.1 का कंप्रेस्ड लिब) लोड करना 'लाइटवेट' नहीं है :) बेशक, अगर आपके पास कई अन्य फंक्शनलिटी का उपयोग है, तो यह jQuery का उपयोग करने लायक होगा। यह एक बहुत अच्छी लाइब्रेरी है

— आर्टोग

@AdamIngmansson मेला काफी! लेकिन मुझे लगता है कि आप जानते हैं कि JQ min.js फ़ाइल का उपयोग किया जाता है, ऐसा अक्सर ब्राउज़र के कैश में पाया जाता है। इस हद तक कि शायद यह कहने के लिए एक अच्छा तर्क है "हमेशा JQ का उपयोग करें और इसे अनुकूलन चरण के भाग के रूप में उपयोग न करें, यदि यह वास्तव में आवश्यक साबित होता है"। यह संभवतः कुछ संदर्भों (फोन ऐप आदि) में आवश्यक रूप से आवश्यक साबित हो सकता है ... यह मेरे पैलेट जेएस ज्ञान से परे है।

— माइक कृंतक

Answer 4

शायद, सबसे साफ समाधान नहीं है, लेकिन यह एक-एक को हटाने की तुलना में निश्चित रूप से सरल है:

document.getElementById("DropList").innerHTML = "";

Comments

मैं आमतौर पर प्लेग की तरह innertHTML से बचता हूँ। लेकिन यह चीजों को इतना सरल बनाता है कि मैं वास्तव में इसे पसंद करता हूं।

— पेटर्सनट्स

मुझे यह काम नहीं मिला। सुनिश्चित नहीं हैं कि इस तरह से चयन के विकल्प क्यों स्पष्ट नहीं हैं।

— MikaelL

यदि आप याद रखें कि यह किस ब्राउज़र में होता है, तो @MikaelL, यह उपयोगी है और यदि आप याद रख सकें तो इसका संस्करण।

— उपयोगकर्ता

Answer 5

यह सबसे अच्छा तरीका है:

function (comboBox) {
    while (comboBox.options.length > 0) {                
        comboBox.remove(0);
    }        
}

Comments

इसने मुझे आज बचाया, क्योंकि 'के लिए () {selectbox.remove ()}' तंत्र किसी भी तरह सभी विकल्पों को स्पष्ट नहीं करता है। धन्यवाद।

— सोनाप्लेक्स

थोड़ा कम के रूप मेंwhile (comboBox.options.length) comboBox.remove(0);

— EkriirkE

Answer 6

यह एक छोटा तरीका है:

document.getElementById('mySelect').innerText = null

एक लाइन, कोई नहीं, कोई JQuery, सरल।

Comments

सबसे छोटा नहीं, नीचे मेरा जवाब देखें।

— उपयोगकर्ता

Answer 7

function removeOptions(obj) {
    while (obj.options.length) {
        obj.remove(0);
    }
}

Comments

यह समाधान एकमात्र है जो मेरे लिए काम करता है। Iceweasel 10.0.12 और क्रोम 26.

— डेविड

Answer 8

मैं यह बताना चाहता हूं कि मूल प्रश्न में समस्या आज भी प्रासंगिक नहीं है। और उस समाधान का और भी छोटा संस्करण है:

selectElement.length = 0;

मैंने परीक्षण किया है कि दोनों संस्करण फ़ायरफ़ॉक्स 52, क्रोम 49, ओपेरा 36, सफारी 5.1, आईई 11, एज 18, क्रोम, फ़ायरफ़ॉक्स, सैमसंग इंटरनेट और एंड्रॉइड पर यूसी ब्राउज़र, आईफोन 6 एस, एंड्रॉइड 4.2 पर नवीनतम संस्करणों में काम करते हैं। 2 स्टॉक ब्राउज़र। मुझे लगता है कि यह निष्कर्ष निकालना सुरक्षित है कि यह अभी जो भी उपकरण है उसके साथ बिल्कुल संगत है, इसलिए मैं इस दृष्टिकोण की सलाह देता हूं।

Answer 9

यह थोड़ा आधुनिक और शुद्ध जावास्क्रिप्ट है

document.querySelectorAll('#selectId option').forEach(option => option.remove())

Comments

सबसे तेज कोड। परीक्षण के लिए लगभग 250000 विकल्पों को हटाने का प्रयास करें

— Andrej

Answer 10

प्रोटोटाइप के साथ :

$('yourSelect').select('option').invoke('remove');

Answer 11

यदि आप JQuery का उपयोग कर रहे हैं और आपके चयनित नियंत्रण में ID "DropList" है तो आप इस तरह से इसके विकल्प हटा सकते हैं:

$('#DropList option').remove();

वास्तव में यह मेरे लिए किसी भी विकल्प सूची के साथ काम करता है, जैसे कि डटलिस्ट।

आशा करता हूँ की ये काम करेगा।

Comments

एक अच्छे उत्तर में इससे अधिक विवरण होना चाहिए। पाठक को इस बात का कोई अंदाजा नहीं हो सकता है कि आपका मतलब jQuery है।

— मिफेट

@Mifeet अगर उपयोगकर्ता को पता नहीं है कि JQuery का यहां क्या मतलब है, तो उसे करियर बदलना चाहिए

— एमिलियो गॉर्ट

Answer 12

ध्यान दें कि एक चयन में अपने बच्चों के रूप में
ऑप्टोग्रुप और
विकल्प संग्रह दोनों हो सकते हैं
।

इसलिए,

विधि # 1

var selectElement = document.getElementById('myselectid');
selectElement.innerHTML = '';

विधि # 2

var selectElement = document.getElementById('myselectid');
selectElement.textContent = '';

मैंने परीक्षण किया, दोनों क्रोम पर काम करते हैं।
मुझे सरल, पुराने जमाने की विधि # 1 पसंद है।

Comments

यह सबसे अच्छा जवाब है। इसके अलावा, यदि आपके पास पहले से ही चयन के लिए एक jquery संदर्भ है:$select.html('')

— The_nuts

Answer 13

प्रयत्न

document.getElementsByTagName("Option").length=0

या शायद removeChild () फ़ंक्शन में देखें।

या यदि आप jQuery फ्रेमवर्क का उपयोग करते हैं।

$("DropList Option").each(function(){$(this).remove();});

Answer 14

JQuery का उपयोग करना एक सुंदर, छोटा और चालाक तरीका है!

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

Comments

यह वास्तव में इस मौजूदा जवाब का सिर्फ एक दोहराव है ।

— पांग

Answer 15

इसका उपयोग विकल्प साफ़ करने के लिए किया जा सकता है:

function clearDropDown(){
  var select = document.getElementById("DropList"),
      length = select.options.length;
  while(length--){
    select.remove(length);
  }
}

<select id="DropList" >
  <option>option_1</option>
  <option>option_2</option>
  <option>option_3</option>
  <option>option_4</option>
  <option>option_5</option>
</select>
<button onclick="clearDropDown()">clear list</button>

Answer 16

उलट जाओ। प्रत्येक निकालने के बाद कारण का आकार घटता है।

for (i = (len-1); i > -1; i--) {
    document.getElementById("elementId").remove(i);
}

Answer 17

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length; i++) {
  select.options[i].remove();
}

आशा है, यह कोड आपकी मदद करेगा

Answer 18

मुझे लगता है कि सबसे अच्छा सोल है। है

 $ ( "# Myselectid") एचटीएमएल ( '')। 

Answer 19

सबसे सरल समाधान सबसे अच्छे हैं, इसलिए आपको बस आवश्यकता है:

var list = document.getElementById('list');
while (list.firstChild) {
    list.removeChild(list.firstChild);
}

<select id="list">
  <option value="0">0</option>
  <option value="1">1</option>
</select>

Answer 20

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

var select = document.getElementById("myselect");
for (var i = select.options.length - 1 ; i >= 0 ; i--)
    select.remove(i);

या यदि आप चाहें, तो आप इसे एक समारोह बना सकते हैं:

function clearOptions(id)
{
    var select = document.getElementById(id);
    for (var i = select.options.length - 1 ; i >= 0 ; i--)
        select.remove(i);
}
clearOptions("myselect");

Answer 21

var select = document.getElementById('/*id attribute of your select here*/');
for (var option in select){
    select.remove(option);
}

Answer 22

उपरोक्त उत्तर के कोड को पूरी सूची को हटाने के लिए थोड़े बदलाव की आवश्यकता है, कृपया इस कोड के टुकड़े की जांच करें।

var select = document.getElementById("DropList");
var length = select.options.length;
for (i = 0; i < length;) {
  select.options[i] = null;
  length = select.options.length;
}

लंबाई को ताज़ा करें और यह ड्रॉप डाउन सूची से सभी डेटा को हटा देगा। उम्मीद है कि यह किसी की मदद करेगा।

Comments

अच्छा जोड़ - एक पल के लिए स्टम्प्ड हो गया था क्योंकि यह हर बार सभी विकल्पों को नहीं हटा रहा था।

— राल्फारूओ

Answer 23

while(document.getElementById("DropList").childNodes.length>0) 
{
    document.getElementById("DropList").removeChild(document.getElementById("DropList").childNodes[0]);
}

Answer 24

यदि आपको IE का समर्थन करना है और आपकी चयनित सूची में 100 से अधिक आइटम हैं, तो मैं आपको अनुशंसा करता हूं कि आप फ़ंक्शन के साथ चयन को प्रतिस्थापित करने पर विचार करें जैसे:

function clearOptions(select) {
    var selectParentNode = select.parentNode;
    var newSelect = select.cloneNode(false); // Make a shallow copy
    selectParentNode.replaceChild(newSelect, select);
    return newSelect;
}

चयनित पैरामीटर या तो jquery चयनकर्ता या document.getElementBy कॉल से तत्व होना चाहिए। इसका केवल नकारात्मक पक्ष यह है कि आप उन घटनाओं को खो देते हैं, जिन्हें आपने चयन के लिए वायर्ड किया था, लेकिन आप उन्हें आसानी से पुनः प्राप्त कर सकते हैं क्योंकि यह फ़ंक्शन से वापस लौटा दिया गया है। मैं एक चुनिंदा के साथ काम कर रहा था जिसमें ~ 3k आइटम थे और चयन को खाली करने के लिए IE9 पर 4 सेकंड लगेंगे ताकि मैं इसे नई सामग्री के साथ अपडेट कर सकूं। लगभग तुरंत इस तरह से कर रहा है।

Comments

आप अधिक जानकारी यहां पा सकते हैं: somacon.com/p542.php और अधिक सरल तरीका:$('#selectbox').replaceWith($('#selectbox')[0].cloneNode(false));

— FDisk

Answer 25

वेनिला जावास्क्रिप्ट के लिए ऐसा करने का सरल और सुरुचिपूर्ण तरीका है:

for(var o of document.querySelectorAll('#DropList > option')) {
  o.remove()
}

Answer 26

आज मैं उसी समस्या का सामना कर रहा था, मैंने नीचे के रूप में चयन बॉक्स को लोड करते समय किया था। (सादा जेएस में)

        var select = document.getElementById("item");
        select.options.length = 0;
        var opt = document.createElement('option');
        opt.value = 0;
        opt.innerHTML = "Select Item ...";
        opt.selected = "selected";
        select.appendChild(opt);


       for (var key in lands) {
            var opt = document.createElement('option');
            opt.value = lands[key].id;
            opt.innerHTML = lands[key].surveyNo;
            select.appendChild(opt);

        }

Answer 27

var select =$('#selectbox').val();

Comments

आपको अपने उत्तर के बारे में अधिक विवरणात्मक होना चाहिए

— कृपा पटेल