如何通过jquery删除选择框的未选择选项

时间:2016-09-08 09:46:26

标签: jquery drop-down-menu html-select

我想通过j-query和java脚本简单代码

删除所有未选择的特殊选择框选项

示例:如果我选择第一个选择框的test-1选项,而不是所有未选中的选项删除第一个选择框,并且此条件适用于所有选择框

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select class="mymultiSelect" onchange="myfun()">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect" onchange="myfun()">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect" onchange="myfun()">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect" onchange="myfun()">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect" onchange="myfun()">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>

<script>

function myfun(){
var foo = [];
$('.mymultiSelect :selected').each(function(i, selected){
  
  if($(selected).val() != 0)
  {
  		foo[i] = $(selected).val();
  		alert(foo[i]);
  }
  
});

}


</script>

2 个答案:

答案 0 :(得分:4)

尝试这样的事情:

$(function() {
  $('.mymultiSelect').on('change', function() {
    $(this).find('option').not(':selected').remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>

答案 1 :(得分:1)

我不太确定我是否理解正确。

我的代码使用所选的值并将其从所有其他选择中删除。我希望这适合你。

$(function() {
  $('.mymultiSelect').on('change', function() {
    $('.mymultiSelect').not($(this)).find('option[value="'+$(this).val()+'"]').remove();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>
<select class="mymultiSelect">
	<option value="0">-select-</option>
	<option value="1">test - 1</option>
	<option value="2">test - 2</option>
	<option value="3">test - 3</option>
	<option value="4">test - 4</option>
</select>