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




jquery html (12)

আমি এই ধরনের জিনিস জন্য দরকারী jQuery নির্বাচন বক্স ম্যানিপুলেশন প্লাগিন খুঁজে।

আপনি সূচী, মান, বা regex দ্বারা সহজে একটি আইটেম মুছে ফেলতে পারেন।

removeOption(index/value/regex/array[, selectedOnly])

Remove an option by
- index: $("#myselect2").removeOption(0);
- value: $("#myselect").removeOption("Value");
- regular expression: $("#myselect").removeOption(/^val/i);
- array $("#myselect").removeOption(["myselect_1", "myselect_2"]);

সমস্ত বিকল্প অপসারণ করতে, আপনি $("#myselect").removeOption(/./); করতে পারেন। অপসারণ বিকল্প $("#myselect").removeOption(/./);

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

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


আমি শুধু একটি option যোগ করার অন্য উপায় সুপারিশ করতে চান। একটি স্ট্রিং হিসাবে value এবং text নির্ধারণ করার পরিবর্তে এটি করতে পারেন:

var option = $('<option/>')
                  .val('option5')
                  .text('option5');

$('#selectBox').append(option);

বিকল্পগুলি 'মান এবং পাঠগুলি গতিশীলভাবে যোগ করার সময় এটি একটি কম ত্রুটি-প্রবণ সমাধান।


এই বক্স নির্বাচন করুন এইচটিএমএল

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

যদি কেউ একটি নির্বাচন ভিতরে সব অপশন মুছে ফেলার প্রয়োজন, আমি একটি litle ফাংশন করেনি।

আশা করি এটি আপনার কাজে লাগবে

var removeAllOptionsSelect = function(element_class_or_id){
    var element = $(element_class_or_id+" option");
    $.each(element,function(i,v){
        value = v.value;
        $(element_class_or_id+" option[value="+value+"]").remove(); 
    })
}

শুধুমাত্র চালানো আছে

removeAllOptionsSelect("#contenedor_modelos");

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

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

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

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

এবং

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

একটি বিকল্প সরান:

$("#selectBox option[value='option1']").remove();
<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").append('<option value="option5">option5</option>');
<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').empty();

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

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>



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

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

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

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

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




html-select