javascript - একটি নির্বাচন বাক্স থেকে একটি আইটেম অপসারণ




jquery html (10)

আমি কিভাবে একটি বাক্স থেকে আইটেম অপসারণ, বা আইটেম যোগ করবেন? আমি 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>

জাভাস্ক্রিপ্ট

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>


আপনি এই সঙ্গে নির্বাচিত আইটেম মুছে ফেলতে পারেন:

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

আপনি একটি তালিকা আছে এবং ড্রপডাউন না থাকলে এটি দরকারী।


আমি কোনও আইডি, শুধুমাত্র একটি বর্গ ছাড়া একটি নির্বাচন থেকে প্রথম বিকল্পটি সরাতে হয়েছিল, তাই আমি এই কোডটি সফলভাবে ব্যবহার করেছি:

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

আমি দুটি পৃষ্ঠা খুঁজে পেয়েছি যা সহায়ক বলে মনে হচ্ছে, এটি ASP.Net এর জন্য লেখা হয়েছে, তবে একই জিনিস প্রয়োগ করা উচিত:

  1. কিভাবে jQuery ব্যবহার করে ড্রপডাউন তালিকা থেকে আইটেম যোগ / অপসারণ করতে
  2. 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>

আপনি সম্পূর্ণভাবে অপসারণ এবং নির্বাচন বক্স থেকে বিকল্প যোগ করতে চান, তাহলে আপনি এই কোড ব্যবহার করতে পারেন

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

একটি আইটেম সরান

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

একটি আইটেম যোগ করুন

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

একটি বিকল্প জন্য চেক করুন

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

একটি নির্বাচিত বিকল্প অপসারণ করতে

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

এটা করা উচিত:

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


শুধু যে কেউ খুঁজছেন জন্য এই বৃদ্ধি, আপনি শুধু করতে সক্ষম হয়:

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

এবং

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

হার্ড-কোড ছাড়াই গতিশীলভাবে যোগ / অপসারণ করা হচ্ছে:

// গতিশীলভাবে নির্বাচন থেকে মান মুছে ফেলুন

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

// নির্বাচন করার জন্য গতিশীল মান যোগ করুন

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







html-select