আমি কীভাবে একটি ড্রপডাউন বাক্সে সমস্ত বিকল্প সাফ করব?

Question

আমার কোড আইই তে কাজ করে তবে সাফারি, ফায়ারফক্স এবং অপেরাতে বিরতি দেয়। (বড় অবাক)

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

অনুসন্ধানের পরে, আমি শিখেছি এটি এটি length=0পছন্দ করে না।
আমি চেষ্টা করেছি ...options=nullএবং var clear=0; ...length=clearএকই ফলাফল দিয়েছি ।

আমি একসাথে একাধিক বস্তুর সাথে এটি করছি, তাই আমি কিছু হালকা জেএস কোড খুঁজছি।

Comments

এইচটিএমএল ব্যবহার করার জন্য সমস্ত অপশন (!?) এবং পুনরায় রিফ্রেশ পৃষ্ঠার পরে নির্বাচিত বিকল্পগুলির ব্রাউজারের ইতিহাস পুনরায় সেট করার জন্য <option selected>?? (গুগল আমাদের এখানে রাখে তবে এটি এখানে নেই) ... ডকুমেন্ট.জেটএলমেন্টবিআইআইডি ("ফর্ম 1") দেখুন reset রিসেট () আসল সমাধান।

— পিটার ক্রাউস

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();

— আপনিও

এটি একটি খারাপ ধারণা বলে মনে হচ্ছে - আইটেমগুলি বাতিল করতে সেটগুলি সরানোর মতো নয়।

এটি প্রত্যাশিত হিসাবে কাজ করে না। যখন আমি সেই কোডটি ব্যবহার করি এটি ড্রপডাউনতে একটি অবজেক্ট ছেড়ে যায়।

— gabrjan

এই কোডটি ক্রাশ হতে পারে। বিপরীতে লুপটি চালানোর নিরাপদতম উপায়।

— কাংকান

এটি করার আরও ভাল উপায়ের জন্য অন্যান্য উত্তরগুলি পরীক্ষা করে দেখুন।

— টিম ক্যাভানফ

Answer 2

এর এইচটিএমএল উপাদানগুলির বিকল্পগুলি অপসারণ 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()পদ্ধতি rearranges optionsসংগ্রহ। এইভাবে, এটি গ্যারান্টিযুক্ত যে সরানো উপাদান এখনও বিদ্যমান!

Comments

@ ফ্যাবিয়োর জন্য চিয়ার্স, এটি অন্যান্য পরামর্শগুলির বিপরীতে আইটেমগুলি সরিয়ে দেয়।

— কনস্টান্টা

এখানে মূল কীটি আমার মনে হয় সিলেক্টবক্স.অপশনগুলির পিছনের দিকের ট্র্যাভারসাল .... আমি যখন ট্র্যাভারসাল ফরোয়ার্ড করার চেষ্টা করছিলাম তখন এই সমাধানটি ব্যর্থ হয়েছিল

— স্কটিসিস

হ্যাঁ, এটি ব্যর্থ হবে কারণ সরানোর () পদ্ধতিটি অ্যারেটিকে পুনরায় সাজিয়ে তুলবে। এটি পিছনে করলে গ্যারান্টি হবে যে সরানো উপাদানটি থাকবে।

— ফাবিয়ানো

সিলেক্টবক্স.ওপশন.লেন্থ = 0 যোগ করা হচ্ছে; সংজ্ঞা শেষে এটি সমস্ত ব্রাউজারে নিখুঁত করতে পারে।

— ওমকার সীরা

সরল কোডটি যখন রয়েছে (সিলেক্ট.ওপশন.সৌধ) নির্বাচিত এল.প্যাশনস.রেভ (0)

— এমআইএফ

Answer 3

আপনি যদি হালকা ওজনের স্ক্রিপ্ট পেতে চান তবে jQuery অনুসন্ধান করুন। JQuery এ, সমস্ত বিকল্প অপসারণের সমাধানটি এরকম হবে:

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

Comments

আমি যুক্তি দিয়েছিলাম যে jQuery যুক্ত করার খুব কাজটি "লাইটওয়েট" এর বিপরীত যখন for (a in select.options) { select.options.remove(0); }কাজটি ঠিকঠাক হয়।

— আর্টোগ

ইহা পারিপার্শ্বিক অবস্থা উপর নির্ভর করে। একটি ওয়েব অ্যাপ্লিকেশনটিতে, পাঠযোগ্যতা কয়েক $("#droplist").empty();হাজার লাইনের ভ্যানিলা জেএসের তুলনায় টাইপ কোডের একশ লাইনের জিক্যুরি যুক্ত করার উপযোগী করে তোলে। যদি আমরা একটি সাধারণ ওয়েবপৃষ্ঠায় মার্কআপ / প্রসাধনী কথা বলছি তবে আপনি 100% সঠিক correct

— অর্ধ_দ্বৈত

@ অ্যাডাম এংম্যানসন আমি যখন লোকেরা জিকিউরির ব্যবহারকে অস্বীকৃতি জানায় তখন আমি এটিকে অবাক করে দেখি। আমি এই ধারনাটিতে এই জাতীয় পদ্ধতি ব্যবহার করব যে প্রদত্ত (ইউটিলিটি) কার্য সম্পাদনের সর্বোত্তম, দ্রুততম এবং সর্বোপরি সবচেয়ে নির্ভরযোগ্য উপায়ের জন্য জিকিউ এর পিছনে ইঞ্জিনিয়াররা সব ধরণের পরীক্ষা করেছেন। জেকিউ (বা কোনও ভাল গ্রন্থাগার) এর বিষয়টি হ'ল জাগতিক কাজগুলি গ্রহণ করা যাতে আপনি আকর্ষণীয় বিষয়গুলিতে মনোনিবেশ করতে পারেন।

— মাইকে রডেন্ট

@ মাইকারোডেন্ট আমার কোনও সন্দেহ নেই যে ফাংশনটি নিজেই শীর্ষ মানের এবং কর্মক্ষমতা নিয়ে। তবে কেবলমাত্র সেই ছোট্ট ফাংশনের জন্য একটি 86 কেবি (সংস্করণ 3.2.1 এর সংকীর্ণ লিবি) ফাইল লোড করা 'লাইটওয়েট' নয় :) অবশ্যই, যদি আপনি অন্যান্য কার্যকারিতা অনেকগুলি ব্যবহার করেন তবে এটি jQuery ব্যবহারের জন্য উপযুক্ত হবে। এটি একটি খুব ভাল গ্রন্থাগার

— আর্টোগ

@ অ্যাডামআইংম্যানসন ফেয়ার যথেষ্ট! তবে আমি আপনাকে সচেতন করছি যে জিকিউ min.js ফাইলটি প্রায়শই ব্যবহৃত হয় এটি প্রায়শই ব্রাউজারের ক্যাশে পাওয়া যায়। এমন একটি মাত্রায় যে "সর্বদা জেকিউ ব্যবহার করুন এবং এটি একটি অপ্টিমাইজেশনের পর্যায়ে অংশ হিসাবে ব্যবহার না করা বিবেচনা করুন, যদি এটি সত্যই প্রয়োজনীয় প্রমাণিত হয় তবে" সম্ভবত এই যুক্তির পক্ষে একটি ভাল যুক্তি রয়েছে। এটি সম্ভবত কিছু নির্দিষ্ট প্রসঙ্গে (ফোন অ্যাপ্লিকেশন ইত্যাদি) সম্ভবত প্রয়োজনীয় প্রমাণিত হতে পারে ... এটি আমার জালিয়াতির জেএস জ্ঞানের বাইরে।

— মাইক রডেন্ট

Answer 4

সম্ভবত, সবচেয়ে পরিষ্কার সমাধান নয়, তবে এটি অবশ্যই একের পর এক অপসারণের চেয়ে সহজ:

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

Comments

আমি সাধারণত প্লেগের মতো অন্তর্হীন এইচটিএমএল এড়িয়ে চলি। তবে এটি জিনিসগুলিকে এত সহজ করে তোলে যা আমি আসলে এটি পছন্দ করি।

— পিটারসেন্টস

আমি এই কাজ করতে পারে না। নিশ্চিত নয় যে কেন এইভাবে নির্বাচন বিকল্পগুলি সাফ করে না।

— মিকাএলএল

@ মিকাএল, আপনি যদি এটি ব্রাউজারে ঘটে তবে এটি যুক্ত করুন And এবং এর সংস্করণ, যদি আপনি মনে করতে পারেন।

— ব্যবহারকারী

Answer 5

এই হল সর্বোত্তম উপায় :

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

Comments

এটি আমাকে আজ বাঁচিয়েছে, কারণ '() {সিলেক্টবক্স.প্রবাহ () mechanism' প্রক্রিয়াটি কোনওভাবে সমস্ত বিকল্প সাফ করে না। ধন্যবাদ।

— Sonlexqt

এর চেয়ে সামান্য খাটোwhile (comboBox.options.length) comboBox.remove(0);

— একরির্কি

Answer 6

এটি একটি ছোট উপায়:

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

এক লাইন, কোন জন্য নয়, কোনও জিকুয়ারি নয়, সহজ।

Comments

সবচেয়ে কম নয়, নীচে আমার উত্তর দেখুন।

— ব্যবহারকারী

Answer 7

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

Comments

এই সমাধানটি একমাত্র আমার জন্য কাজ করে। আইসওয়েজেল 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 বিকল্পগুলি অপসারণ করার চেষ্টা করুন

— আন্দ্রেজ

Answer 10

সঙ্গে PrototypeJS :

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

Answer 11

আপনি যদি জিকিউরি ব্যবহার করছেন এবং আপনার নির্বাচনী নিয়ন্ত্রণে আইডি "ড্রপলিস্ট" রয়েছে আপনি এই বিকল্পগুলি অপশনগুলি অপসারণ করতে পারেন:

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

প্রকৃতপক্ষে এটি কোনও বিকল্প তালিকার সাথে আমার জন্য কাজ করে, যেমন ড্যাটালিস্ট।

আশা করি এটা সাহায্য করবে.

Comments

একটি ভাল উত্তরের সাথে এর চেয়ে আরও বিশদ থাকতে হবে। আপনি সম্ভবত 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

অথবা হতে পারে সরানোচিল্ড () ফাংশনটি দেখুন।

বা আপনি যদি jQuery ফ্রেমওয়ার্ক ব্যবহার করেন।

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

Answer 14

জিকুয়ারি ব্যবহার করা এটি করার একটি সুন্দর, খাটো এবং স্মার্ট উপায়!

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

আমি মনে করি এটি সবচেয়ে ভাল sol হয়

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

সম্পূর্ণ উত্তরটি সরিয়ে দিতে উত্তরের কোডের উপরে সামান্য পরিবর্তন দরকার, দয়া করে কোডের এই অংশটি দেখুন check

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

আপনার যদি আইই সমর্থন করতে হয় এবং আপনার নির্বাচিত তালিকায় আপনার 100 টিরও বেশি আইটেম রয়েছে তবে আমি দৃ strongly়ভাবে আপনাকে এই জাতীয় ফাংশন দিয়ে সিলেক্টটি প্রতিস্থাপনের বিষয়টি বিবেচনা করার পরামর্শ দিচ্ছি:

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

নির্বাচিত প্যারামিটারটি উপাদানটি একটি জ্যাকোয়ারি নির্বাচক বা নথি থেকে হওয়া উচিত get এর একমাত্র নেতিবাচকতাটি হ'ল আপনি যে ইভেন্টগুলিকে বাছাই করেছেন তার কাছে হারাতে পারেন তবে ফাংশনটি ফিরে না আসায় আপনি সহজেই এগুলি পুনরায় সংযুক্ত করতে পারেন। আমি এমন একটি নির্বাচনের সাথে কাজ করছিলাম যার মধ্যে 3k ডলার আইটেম ছিল এবং নির্বাচনটি সাফ করতে IE9 এ 4 সেকেন্ড সময় লাগবে যাতে আমি এটি নতুন সামগ্রীতে আপডেট করতে পারি। প্রায় তাত্ক্ষণিকভাবে এটি করা।

Comments

আপনি এখানে আরও তথ্য খুঁজে পেতে পারেন: somacon.com/p542.php এবং আরও সহজ উপায়:$('#selectbox').replaceWith($('#selectbox')[0].cloneNode(false));

— এফডিস্ক

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

আপনার উত্তর সম্পর্কে আপনাকে আরও বর্ণনামূলক হওয়া উচিত

— কৃপা প্যাটেল