আপনি কীভাবে একটি নির্বাচিত বাক্সের সমস্ত অপশন অপসারণ করবেন এবং তারপরে একটি বিকল্প যুক্ত করে এটি jQuery দিয়ে নির্বাচন করবেন?

1077

কোর জিকিউরি ব্যবহার করে আপনি কীভাবে একটি নির্বাচিত বাক্সের সমস্ত বিকল্প মুছে ফেলবেন, তারপরে একটি বিকল্প যুক্ত করুন এবং এটি নির্বাচন করবেন?

আমার সিলেক্ট বক্সটি নীচে রয়েছে।

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

সম্পাদনা: নিম্নলিখিত কোডটি শৃঙ্খলিত করতে সহায়ক ছিল। তবে (ইন্টারনেট এক্সপ্লোরারে) .val('whatever')যুক্ত হওয়া বিকল্পটি নির্বাচন করেনি। (আমি উভয় একই 'value' এগুলির ব্যবহার করেনি .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>') ;

তবে উভয় উত্তরই আমাকে আমার চূড়ান্ত সমাধানের দিকে নিয়ে গেল ...

javascript  jquery  option  html-select 
— জে কার্বেট
সূত্র

উত্তর:

1694 
$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;
— ঔজ্বল্যহীন
সূত্র
3
@ নিকফ: আমারও একই সমস্যা, তবে ড্রপডাউন পরিবর্তনের পরিবর্তে আমার চেকবক্সগুলির একটি সেট যুক্ত করা দরকার তবে আমার চেকবক্সগুলি এক্সএমএল থেকে আসছে। এটি কাজ করে না
— Defau1t
10
দ্রষ্টব্য আপনি বিকল্প / অ্যাট্রি / পাঠ্যটিও ভেঙে ফেলতে পারেন:.append($("<option></option>").attr("value", '123').text('ABC!')
— ব্রক হেনসলে
1
@ ব্রকহেনসলে, আমি বিশ্বাস করি যে এই উত্তরটির প্রকৃত কমনীয়তা শেষ () ফাংশনটির সাথে কম্বোয় যথাযথ শৃঙ্খলাবদ্ধ। আপনার পরামর্শটি পাশাপাশি কাজ করবে। JQuery এপিআই ডকুমেন্টেশন থেকে: "jQuery এর বেশিরভাগ DOM ট্র্যাভারসাল পদ্ধতি jQuery অবজেক্টে কাজ করে এবং একটি নতুন উত্পাদন করে, ডিওএম উপাদানগুলির একটি পৃথক সেট মেলে When এটি যখন ঘটে তখন মনে হয় যেন উপাদানগুলির নতুন সেটটি একটি স্ট্যাকের দিকে ঠেলাঠেলি করে is যা বস্তুর অভ্যন্তরে রক্ষণাবেক্ষণ করা হয়। প্রতিটি ধারাবাহিক ফিল্টারিং পদ্ধতি স্ট্যাকের উপরে একটি নতুন উপাদান সেট ঠেলে দেয়। আমাদের যদি কোনও পুরানো উপাদান সেট প্রয়োজন হয় তবে আমরা স্ট্যাকের পিছনে সেটগুলি পপ করতে শেষ () ব্যবহার করতে পারি ""
— অ্যান্টনি ম্যাসন
1
আমি মেনুটি পুনরায় তৈরি করতে এবং আইওএসের জন্য ফোনগ্যাপে জিকুয়েরি মোবাইলে নির্বাচিত বিকল্পটি পরিবর্তন করতে সক্ষম হয়েছি। পরে মেনুটি রিফ্রেশ করারও দরকার ছিল।
— নিষ্ক্রিয় করা হয়েছে
3
@ ব্রোকহেন্সলে আপনি এমনকি এতদূর যেতে পেরেছিলেন.append($("<option></option>", {'value':'123'}).text('ABC!')
— vahanpwns
709 
$('#mySelect')
    .empty()
    .append('<option selected="selected" value="whatever">text</option>')
;
— Mahzilla
সূত্র
34
কৌতুহলের বাইরে, 'খালি' দ্রুত 'খুঁজে পাওয়া' এর চেয়ে দ্রুত? দেখে মনে হচ্ছে এটি হ'ল - কারণ 'সন্ধান' একটি নির্বাচক ব্যবহার করবে এবং 'খালি' খালি উপাদানটিকে খালি চাপ দেবে।
— ড্যান এস্পারজা
52
@ ড্যানস্পারজা আমি আপনাকে একটি জাস্পফারফ বানিয়েছি; empty()অবশ্যই দ্রুত পরিণত হয়েছে;) jsperf.com/find-remove-vs-empty
— vzwick
এই সমাধানটি দিয়ে আমি একটি বিভ্রান্ত সমস্যা পেয়েছি। এর জনবহুল অংশটি ঠিক আছে, তবে যখন আমি কোনও মান নির্বাচন করার চেষ্টা করি (আমার ক্ষেত্রে একদিন) আমি মানটি লগ করতে পারি তবে নির্বাচিত ক্ষেত্রে প্রদর্শিত মানটি প্রথম মানেই থাকে .... আমি পারি এটি সমাধান করবেন না: /
— তাকসস জসোল্ট
5
@ তাকসজসোল্ট সম্ভবত .val('whatever')ম্যাট এর উত্তরের মতো আপনার শৃঙ্খলের শেষে একটি যুক্ত করা উচিত ।
— কোডোস জনসন
.empty () বস্তুগত সাথে কাজ করে, যেখানে .reove () কাজ করেনি
— ওভারলর্ডভিআই
127

কেন শুধু সরল জাভাস্ক্রিপ্ট ব্যবহার করবেন না?

document.getElementById("selectID").options.length = 0;
— শন
সূত্র
7
আমি সম্মত হই যে সমস্ত বিকল্প অপসারণের এটি সহজ সমাধান, তবে এটি কেবল প্রশ্নের অর্ধেক উত্তর দেয় ...
— এলেজার
2
এটি কি একটি স্মৃতি ফাঁস তৈরি করবে না? বিকল্প উপাদানগুলি এখন অ্যাক্সেসযোগ্য তবে এখনও বরাদ্দ রয়েছে।
— Synetech
1
সরল পুরানো জেএস এফটিডাব্লু (জয়ের জন্য) !!! :)
— রডদেবাস
78

যদি আপনার লক্ষ্যটি প্রথমটি বাদ দিয়ে সমস্ত বিকল্প অপসারণ করা হয় (সাধারণত 'দয়া করে কোনও আইটেমটি চয়ন করুন' বিকল্প) আপনি ব্যবহার করতে পারেন:

$('#mySelect').find('option:not(:first)').remove();
— mauretto
সূত্র
10
এই উত্তর হওয়া উচিত। অন্যরা সবাই ইচ্ছাকৃতভাবে প্রথমে এটি পুনরায় তৈরি করার দৃষ্টিভঙ্গি দিয়ে সরিয়ে ফেলল, যা আমি পছন্দ করি না; এটি সূচিত করে যে তারা প্রথম বিকল্পটি কোথাও কোথাও সংরক্ষণ করেছে।
76

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

সমাধানটি ছিল স্ট্যান্ডার্ড ডিওএম পদ্ধতি / যথাযথগুলি (পোস্টার মূল হিসাবে) পরিষ্কার করার জন্য জিকুয়েরির পরিবর্তে - এখনও বিকল্পগুলি যুক্ত করতে jQuery ব্যবহার করে।

$('#mySelect')[0].options.length = 0;
— ROW1
সূত্র
6
আমাকে এই পদ্ধতিটি আইআইএল-তেও ব্যবহার করতে হয়েছিল কারণ .empty () আমার নির্বাচিত বাক্সটি একটি গোপন পাত্রে থাকা পিতা-মাতার লুকোচুরি থাকা সত্ত্বেও দৃশ্যমান হয়ে যায়।
— কোড কমান্ডার
2
এই পদ্ধতিটি আরও একটি সামান্য বিট (প্রায় 1%) আরও অভিনয় হিসাবে প্রমাণিত হয়েছে
— vzwick
3
+1 এটি সর্বাধিক পঠনযোগ্য (আমার মতে) এবং জেএসরিউ লিঙ্কে (@ ভিজউইক লিঙ্কযুক্ত) গৃহীত উত্তরটি ছিল 34% ধীর (অপেরা 20)
— মরভেল
35

আপনি "একটি যুক্ত করুন এবং এটি নির্বাচন করুন" এর অর্থ ঠিক কী তা নিশ্চিত নন, এটি যেহেতু ডিফল্টরূপে নির্বাচিত হবে by তবে, আপনি যদি একের বেশি যোগ করেন তবে এটি আরও অর্থবোধ করে। যেমন কিছু সম্পর্কে:

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

"সম্পাদনা" এর প্রতিক্রিয়া : "এই নির্বাচিত বাক্সটি রেডিও বোতামগুলির একটি সেট দ্বারা পপুলেট করা হয়" এর দ্বারা আপনি কী বোঝাতে চেয়েছেন তা কি আপনি পরিষ্কার করতে পারেন? কোনও <select>উপাদানটিতে (আইনত) <input type="radio">উপাদান থাকতে পারে না ।

— ববি জ্যাক
সূত্র
27 
$('#mySelect')
    .empty()
    .append('<option value="whatever">text</option>')
    .find('option:first')
    .attr("selected","selected")
;
— হেডেন চেম্বারস
সূত্র
2
আমরা এখনও আই 6 ব্যবহার করছি এবং এই পদ্ধতিটি কার্যকর হয়নি। যাইহোক, এটি এফএফ 3.5.6.6 এ কাজ করেছে
— জে কর্পেট
3
.change () শেষ সম্মুখের যোগ করার জন্য নির্বাচন পরিবর্তনের ট্রিগার থাকতে পারে
— হেডেন চেম্বারস
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

কীভাবে কেবল নতুন ডেটাতে এইচটিএমএল পরিবর্তন করা যায়।

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

  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));
}
— জয়দীপ শীল
সূত্র
7

আমি নীচে মত নেট খুঁজে পেয়েছি। আমার পরিস্থিতিতে হাজার হাজার বিকল্পের সাথে এটি 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;
}

আরও তথ্য এখানে ।

— marioosh
সূত্র
7 
$("#id option").remove();
$("#id").append('<option value="testValue" >TestText</option>');

কোডের প্রথম লাইনটি কোনও নির্বাচিত বাক্সের সমস্ত বিকল্প সরিয়ে ফেলবে কারণ বিকল্পগুলির সন্ধানের মানদণ্ড উল্লেখ করা হয়নি।

কোডের দ্বিতীয় লাইনটি নির্দিষ্ট মান ("টেস্টভ্যালু") এবং পাঠ্য ("টেস্টটেক্সট") সহ বিকল্প যুক্ত করবে।

— দেব চৌহান
সূত্র
যদিও এটির প্রশ্নের উত্তর হতে পারে, আপনি যদি এটির উত্তর দেয় সে সম্পর্কে কোনও ব্যাখ্যা সরবরাহ করেন তবে এটি অনেক বেশি কার্যকর হবে।
— নিক
6

ম্যারেটোয়ের উত্তরে বিল্ডিং করা, এটি পড়তে এবং বোঝার পক্ষে এটি একটু সহজ:

$('#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 () ব্যবহার করুন
— আগি হামারথিফ
4

এটি আপনার বিদ্যমান মাই সিলেক্টকে নতুন মাই সিলেক্টের সাথে প্রতিস্থাপন করবে।

$('#mySelect').replaceWith('<Select id="mySelect" size="9">
   <option value="whatever" selected="selected" >text</option>
   </Select>');
— বরুণ
সূত্র
4

আপনি কেবল এইচটিএমএল প্রতিস্থাপন করে করতে পারেন

$('#mySelect')
.html('<option value="whatever" selected>text</option>')
.trigger('change');
— নাদিম মনজুর
সূত্র
4

নির্বাচিত ট্যাগ থেকে সমস্ত বিকল্প অপসারণের জন্য মাত্র একটি লাইন এবং আপনি কোনও বিকল্প যুক্ত করতে পারার পরে অপশন যুক্ত করতে দ্বিতীয় লাইন তৈরি করুন। 

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

$('.ddlsl').append(new Option('Select all', 'all'));
— কৌশিক শ্রীমালী
সূত্র
2
  • বিকল্পের মানগুলিকে কোনও বস্তুতে যুক্ত করার জন্য সংরক্ষণ করুন
  • নির্বাচিত ট্যাগটিতে বিদ্যমান বিকল্পগুলি সাফ করুন
  • তালিকা অবজেক্টটি পুনরাবৃত্তি করুন এবং পছন্দসই নির্বাচন করা ট্যাগটিতে সামগ্রী যুক্ত করুন app

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>
স্নিপেট প্রসারিত করুন

— নিফেমি সোলা-ওজো
সূত্র
1

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

$('#myselect').find('option').remove()
.append($('<option></option>').val('value1').html('option1'));
— মোঃ রাসেল হুসেন
সূত্র
এটি যদি কাজ করে তবে আরও কার্যকর হয় আমি দ্বিতীয়টি নির্বাচন করতে পারি না
— আনবুরাজ_এন
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('');
— এলএন নীথারসন
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.