在第二个 select 上从列表中删除项目

Question

我不想第一次从下拉列表中删除一个项目，而是在 select 第二次项目之后，在下面的例子中，如果我 select option1 将删除 option1，但是我需要 select option1（什么都不会被删除），而 selecting option4（现在 option1 将被删除）：

<select name="selectBox" class="sel" id="selectBox">
<option value="0">Select</option>
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>    
</select>

这是代码：

$(".sel").change(function () {
  var getVal = $(this).val();
  $("#selectBox option[value="+getVal+"]").remove();
});

Fiddle

Answer 1

试试这个方法

var theValue;
$('.sel').focus(function () {
    theValue = $(this).attr('value');
});

$(".sel").change(function () {
    $('.sel option[value=' + theValue + ']').remove();
    theValue = $(this).attr('value');
});

DEMO

Answer 2

如果您想删除之前选择的选项，请执行以下操作

var getVal;
$(".sel").change(function() {
  // checking previous value is defined or not
  if (getVal)
  // if defined removing the element
    $("#selectBox option[value=" + getVal + "]").remove();
  // updating selected option value to variable
  getVal = $(this).val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="selectBox" class="sel" id="selectBox">
  <option value="0">Select</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

或者使用 :selected 选择器

更简单的东西

var getVal;
$(".sel").change(function() {
  // removing previous selected option
  $(getVal).remove();
  // updating selected option object to variable
  getVal = $(':selected', this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select name="selectBox" class="sel" id="selectBox">
  <option value="0">Select</option>
  <option value="option1">option1</option>
  <option value="option2">option2</option>
  <option value="option3">option3</option>
  <option value="option4">option4</option>
</select>

更新：如果需要，最初使用change()触发更改事件以获得默认值。

$(".sel").change(function() {
   //.............
}).change();
//--^--

在第二个 select 上从列表中删除项目

Remove item from a list on second select

jquery

list

removeclass