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

Question

আমি কীভাবে একটি নির্বাচিত বাক্স থেকে আইটেমগুলি সরিয়ে ফেলব, বা আইটেমগুলিতে যুক্ত করব? আমি জিকিউরি চালাচ্ছি, সেই কাজটি আরও সহজ করা উচিত। নীচে একটি বাক্স নির্বাচন করুন।

<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>

Answer 1

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

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

Comments

আপনার যদি কোনও বিকল্প অপসারণ করতে হয় এবং অন্যটি নির্বাচন করতে চান: $ ('# সিলেক্টবক্স')। ভাল ('বিকল্প 2')। সন্ধান করুন ('বিকল্প [মান = "বিকল্প 1"]')। অপসারণ ();

— রাদু মারিস

সত্যিই, আমি মনে করি জাভাস্ক্রিপ্টের মাধ্যমে বাছাই করা বাক্সগুলি যেভাবে তৈরি করা হয় তা এখন পর্যন্ত অন্যতম বিভ্রান্তিকর জিনিস, এমনকি আপনার নির্বাচক এবং ডিওএম সম্পর্কে যথেষ্ট যুক্তি রয়েছে understanding

— ট্যাক্রয়

Answer 2

আপনি এটি দিয়ে নির্বাচিত আইটেমটি মুছতে পারেন:

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

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

Comments

এটি আমার জন্য সবকিছু সরিয়ে দিচ্ছে ... অপেক্ষা করুন আমি একাধিক বৈশিষ্ট্যের সাথে নির্বাচন ব্যবহার করছি। আমি কীভাবে এটি একাধিক নির্বাচন থেকে অপসারণ করতে পারি?

— অক্ষয়

Answer 3

window.onload = function ()
{   
    var select = document.getElementById('selectBox');
    var delButton = document.getElementById('delete');

    function remove()
    {
        value = select.selectedIndex;
        select.removeChild(select[value]);
    }

    delButton.onclick = remove;    
}

আইটেমটি যুক্ত করতে আমি দ্বিতীয় নির্বাচন বাক্স তৈরি করব এবং:

var select2 = document.getElementById('selectBox2');
var addSelect = document.getElementById('addSelect');

function add()
{
    value1 = select2.selectedIndex;
    select.appendChild(select2[value1]);    
}

addSelect.onclick = add;

JQuery না যদিও।

Comments

@ জেব্যাকটন: 4 বছর আগে এই লেখাটি ফিরে দেখে আমি নিজের দিকে হাসি এবং আপনি ঠিক বলেছেন :)

— অ্যাড্রিয়ানা

Answer 4

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

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

একটি আইটেম যুক্ত করতে

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

একটি বিকল্প চেক করতে

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

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

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

Answer 5

এটি করা উচিত:

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

Answer 6

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

আপনি সহজেই সূচি, মান বা রেজেক্স দ্বারা কোনও আইটেম সরিয়ে ফেলতে পারেন।

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(/./);।

Comments

-1 কারণ এটি jQuery এবং বেসিক প্রোগ্রামিং ব্যবহার করে ডাব্লু / ওএ প্লাগইন করা যায়।

— স্লোপসাইড ক্রিয়েটিভ

ᕀ 1 কেন চাকাটি পুনরুদ্ধার করুন

— জন হাস্কল

Answer 7

হার্ড-কোড ছাড়াই পরিবর্তনশীল মান যুক্ত করা / সরিয়ে ফেলা:

// পরিবর্তন থেকে নির্বাচন থেকে পরিবর্তন মুছে দিন

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

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

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

Answer 8

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

1. কীভাবে jQuery ব্যবহার করে ড্রপডাউন তালিকা থেকে আইটেমগুলি যুক্ত / সরানো যায়
2. jQuery নির্বাচক এক্সপ্রেশন

Answer 9

নিম্নলিখিত লিঙ্কগুলি সহায়ক হবে-

http://api.jquery.com/remove/

http://api.jquery.com/append/

Answer 10

যে কেউ খুঁজছেন তার জন্য এটি বাড়ানোর জন্য, আপনি কেবল সক্ষম করতে সক্ষম:

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

এবং

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

Comments

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

— অ্যাডাম ওয়ারে

আমি এই পদ্ধতির প্রস্তাব দিই না, কারণ এটি ব্রাউজার নির্দিষ্ট।

— স্কট শ-স্মিথ

এটি একটি পুরানো পোস্ট তবে আমি এই বিষয়ে মন্তব্য করতে চাই। যদিও এটি নির্বাচনের বিকল্পগুলির সাথে মোকাবিলা করার জন্য খুব দুর্দান্ত উপায়, এটি প্রস্তাবিত নয় কারণ আইই এটি সমর্থন করে না

— আহমেদ আলী

Answer 11

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

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>

Answer 12

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

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

Answer 13

আমি কেবল একটি যুক্ত করার জন্য অন্য উপায়টি বলতে চাই option। স্ট্রিং হিসাবে সেট করার পরিবর্তে valueএবং textস্ট্রিং হিসাবে এটিও করতে পারেন:

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

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

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

Comments

আমি ডাউনভোটার নই তবে এটি প্রদর্শিত হবে যে আপনি কোনও বিকল্প কীভাবে যুক্ত করবেন সে সম্পর্কে অর্ধেক ওপিকে উত্তর দিয়েছেন, তবে কীভাবে কোনও বিকল্প অপসারণ করবেন তা নয়।

— জন ওডম

Answer 14

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

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

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

Comments

ফলাফল কি সমান নয় $('#contenedor_modelos').empty();? যদিও কিছু ক্রিয়া দেখে ভাল

— লাগছে

Answer 15

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

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