কীভাবে jQuery এর সাথে <সিলেক্ট> এর বিকল্পগুলি পরিবর্তন করবেন?

Question

মনে করুন বিকল্পগুলির একটি তালিকা পাওয়া যায়, আপনি কীভাবে <select>নতুন <option>এর সাথে আপডেট করবেন ?

Answer 1

emptyপদ্ধতিটি ব্যবহার করে আপনি বিদ্যমান বিকল্পগুলি সরিয়ে ফেলতে পারেন এবং তারপরে আপনার নতুন বিকল্পগুলি যুক্ত করতে পারেন:

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").empty().append(option);

যদি কোনও বস্তুতে আপনার নতুন বিকল্প থাকে তবে আপনি এটি করতে পারেন:

var newOptions = {"Option 1": "value1",
  "Option 2": "value2",
  "Option 3": "value3"
};

var $el = $("#selectId");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

সম্পাদনা করুন: প্রথমটি ছাড়াও সমস্ত বিকল্প অপসারণের জন্য, আপনি :gtনির্বাচকটি ব্যবহার করতে পারেন , optionশূন্যের চেয়ে আরও বেশি সূচকযুক্ত সমস্ত উপাদান এবং removeসেগুলি পেতে:

$('#selectId option:gt(0)').remove(); // remove all options, but not the first 

Comments

খালি () খালি করার পরে প্রথম বিকল্পটি কীভাবে থাকবে?

— মাস্ক

ব্যবহার যদি বুটস্ট্র্যাপ নির্বাচন তারপর অপশন প্রতিস্থাপন পর নির্বাচন জুতো রিফ্রেশ করতে নিম্নলিখিত যোগ করুন: $('#selectId').selectpicker('refresh'); $('#selectId').selectpicker('render');। অন্যথায় নতুন বিকল্পগুলি আপনার নির্বাচিত তালিকায় দৃশ্যমান হবে না।

— পিএনএন

আমি কীভাবে এই বিকল্পগুলির মধ্যে একটি চেক করতে পারি?

— দারস

JQuery নোড তৈরির জন্য আমি ব্যক্তিগতভাবে এই সিনট্যাক্সটি কিছুটা পরিষ্কার পরিচ্ছন্ন দেখতে $el.append($('<option/>', { value: value, text: key }));

— পেয়েছি

ধন্যবাদ বন্ধুরা. যদি আমরা নির্বাচিত মান সেট করতে হয় যখন আমরা ডিফল্ট নির্বাচিত মানের জন্য পৃষ্ঠা সম্পাদনা করি আমরা নির্দিষ্ট পুনরাবৃত্তির জন্য লুপে এর মতো কিছু ব্যবহার করতে পারি আমরা নির্বাচিত add el.append (<('<বিকল্প />', {মান) যুক্ত করতে পারি : মান, নির্বাচিত: 'নির্বাচিত', পাঠ্য: কী}));

— বিকাশকারী

Answer 2

আমি সিএমএসের দুর্দান্ত উত্তরটি দ্রুত jQuery এক্সটেনশনে ফেলেছি:

(function($, window) {
  $.fn.replaceOptions = function(options) {
    var self, $option;

    this.empty();
    self = this;

    $.each(options, function(index, option) {
      $option = $("<option></option>")
        .attr("value", option.value)
        .text(option.text);
      self.append($option);
    });
  };
})(jQuery, window);

এটি "পাঠ্য" এবং "মান" কীগুলি ধারণ করে এমন একটি সামগ্রীর অ্যারের প্রত্যাশা করে। সুতরাং ব্যবহার নিম্নরূপ:

var options = [
  {text: "one", value: 1},
  {text: "two", value: 2}
];

$("#foo").replaceOptions(options);

Answer 3

$('#comboBx').append($("<option></option>").attr("value",key).text(value));

যেখানে কম্বোবক্স আপনার কম্বো বাক্স আইডি।

অথবা আপনি ইতিমধ্যে বিদ্যমান অভ্যন্তরীণ এইচটিএমএলকে স্ট্রিং হিসাবে বিকল্পগুলি যুক্ত করতে পারেন এবং তারপরে নির্বাচিত অভ্যন্তরীণ এইচটিএমএলকে নির্ধারণ করতে পারেন।

সম্পাদন করা

আপনার যদি প্রথম বিকল্পটি রাখা এবং অন্য সমস্ত অপসারণ করতে হয় তবে আপনি ব্যবহার করতে পারেন

var firstOption = $("#cmb1 option:first-child");
$("#cmb1").empty().append(firstOption);

Comments

আপনি পুরানো বিকল্পগুলি সরাবেন না?

— মাস্ক

আপনি কি পুরানোগুলি সাফ করতে চান হে বিদ্যমান বিকল্পগুলিতে নতুন বিকল্প যুক্ত করতে চান?

— রাহুল

Answer 4

কিছু অদ্ভুত কারণে এই অংশ

$el.empty(); // remove old options

সিএমএস সলিউশন থেকে আমার পক্ষে কাজ হয়নি তাই এর পরিবর্তে আমি কেবল এটি ব্যবহার করেছি

el.html(' ');

এবং এটি কাজ করে। সুতরাং আমার ওয়ার্কিং কোডটি এখন এর মতো দেখাচ্ছে:

var newOptions = {
    "Option 1":"option-1",
    "Option 2":"option-2"
};

var $el = $('.selectClass');
$el.html(' ');
$.each(newOptions, function(key, value) {
    $el.append($("<option></option>")
    .attr("value", value).text(key));
});

Answer 5

DOM উপাদান অপসারণ এবং যুক্ত করা বিদ্যমান উপাদানগুলির পরিবর্তনের চেয়ে ধীর।

যদি আপনার বিকল্প সেটগুলির দৈর্ঘ্য একই থাকে তবে আপনি এটির মতো কিছু করতে পারেন:

$('#my-select option')
.each(function(index) {
    $(this).text('someNewText').val('someNewValue');
});

যদি আপনার নতুন বিকল্প সেটের আলাদা দৈর্ঘ্য থাকে, আপনি উপরে বর্ণিত কিছু প্রযুক্তি ব্যবহার করে আপনার সত্যিকারের প্রয়োজনীয় খালি বিকল্পগুলি মুছতে / যুক্ত করতে পারেন।

Answer 6

উদাহরণস্বরূপ যদি আপনার এইচটিএমএল কোডটিতে এই কোডটি থাকে:

<select id="selectId"><option>Test1</option><option>Test2</option></select>

আপনার নির্বাচনের ভিতরে বিকল্পের তালিকাটি পরিবর্তন করতে, আপনি এই কোডটি বেলো ব্যবহার করতে পারেন। যখন আপনার নামের নামে নির্বাচন selectId ।

var option = $('<option></option>').attr("value", "option value").text("Text");
$("#selectId").html(option);

উপরের এই উদাহরণে আমি কেবলমাত্র একটি নতুন বিকল্প দ্বারা বিকল্পের পুরানো তালিকাটি পরিবর্তন করেছি ।

Comments

ওপিকে কেন এই চেষ্টা করা উচিত? আপনি কেবল ওপি-র জন্যই নয়, ভবিষ্যতে এসওতে আগত দর্শকদের জন্য আপনি কী করেছিলেন এবং কেন আপনি সেভাবে এটি করেছিলেন তা সম্পর্কে দয়া করে একটি ব্যাখ্যা যুক্ত করুন।

— জে ব্লানচার্ড

Answer 7

এটা কি সাহায্য করে?

$("#SelectName option[value='theValueOfOption']")[0].selected = true;

Comments

এই প্রশ্নটি একটি <বিকল্প> নির্বাচন না করে গতিশীলভাবে <বিকল্প> একটি <নির্বাচন> এ যুক্ত করার বিষয়ে।

— sisve

Answer 8

হাত দিয়ে কাজ করার পুরানো স্কুলটি আমার পক্ষে সবসময়ই ভাল।

1. নির্বাচনটি পরিষ্কার করুন এবং প্রথম বিকল্পটি ছেড়ে দিন:

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

2. যদি আপনার ডেটা কোনও জসন বা যা কিছু থেকে আসে (কেবলমাত্র ডেটা কনক্যাট):

       var JSONObject = JSON.parse(data);
       newOptionsSelect = '';
       for (var key in JSONObject) {
           if (JSONObject.hasOwnProperty(key)) {
               var newOptionsSelect = newOptionsSelect + '<option value="'+JSONObject[key]["value"]+'">'+JSONObject[key]["text"]+'</option>';
           }
       }
   
       $('#your_select_id').append( newOptionsSelect );

3. আমার জসন ওবজেট:

       [{"value":1,"text":"Text 1"},{"value":2,"text":"Text 2"},{"value":3,"text":"Text 3"}]

এই সমাধানটি অ্যাজাক্সের সাথে কাজ করার জন্য আদর্শ, এবং একটি ডাটাবেস থেকে জসনে উত্তর দেয়।

Answer 9

যদি আমরা <select>ক্রমাগত আপডেট করি এবং আমাদের পূর্ববর্তী মানটি সংরক্ষণ করতে হবে:

var newOptions = {
    'Option 1':'value-1',
    'Option 2':'value-2'
};

var $el = $('#select');
var prevValue = $el.val();
$el.empty();
$.each(newOptions, function(key, value) {
   $el.append($('<option></option>').attr('value', value).text(key));
   if (value === prevValue){
       $el.val(value);
   }
});
$el.trigger('change');