jQuery在下一个选择框中隐藏选择的选项
[英]jQuery hide selected option in next select box
问题描述
I want to hide the selected option in the first select box in the second one. 
我想在第二个选择的第一个选择框中隐藏所选的选项。 My HTML. 我的HTML。
<div>
<select class="fields-mapping">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
<select class="fields-mapping">
<option>Option1</option>
<option>Option2</option>
<option>Option3</option>
</select>
I want option selected in the first select box to be hidden while opening second select box or vise verse using jQuery. 我希望在打开第二选择框或使用jQuery的台钳时隐藏在第一选择框中选择的选项。 What will be a good practice? 有什么好的做法？
Is it something like this? 是这样吗
$('.fields-mapping').select(function () {
$('option:selected', this).hide(); });
4 个解决方案
解决方案1
3 已采纳 2015-04-24 10:21:45
You can use the filter() function to find all option elements in other select elements with matching values, and hide them. 您可以使用filter()函数在其他具有匹配值的select元素中查找所有option元素，并将其隐藏。 Try this: 尝试这个：
$('.fields-mapping').change(function() {
var value = $(this).val();
var $otherOptions = $('.fields-mapping').not(this).find('option').show();
$otherOptions.filter(function() {
return $(this).text() == value;
}).hide();
});
Note this will work for any number of selects without any changes (so long as there are enough option elements within those select elements to make one choice from each). 请注意，这适用于任何数量的选择没有任何变化工作（只要有足够多的option那些中的元素select的元素，使从每一个选择）。
解决方案2
1 2015-04-24 10:39:11
Another solution is to use the :contains and :not(:selected) selector. 另一个解决方案是使用：contains和：not（：selected）选择器。 This will enable you to find the selected option from the other select box. 这将使您能够从另一个选择框中找到选定的选项。
$(".fields-mapping").change(function() {
var selectedOption = $('option:selected', this).text();
$(".fields-mapping option:contains('" + selectedOption + "'):not(:selected)").hide();
});
JSFiddle: https://jsfiddle.net/28frmszv/1/ JSFiddle： https ://jsfiddle.net/28frmszv/1/
解决方案3
0 2015-04-24 10:35:34
You can .find all childrens from all select but not the current select and to filter all options by current text and in the end you hide them. 您可以从所有select .find所有子项，但not从当前选择中.find所有子项，并按当前text filter所有选项，最后将它们隐藏。
$fieldMapping.not($this)
.find('option')
.filter(function () {
return $(this).text() == text;
}).hide();
var $fieldMapping = $('.fields-mapping'); $fieldMapping.change(function() { var $this = $(this); var text = $this.find('option:selected').text(); $fieldMapping.not($this) .find('option') .filter(function () { return $(this).text() == text; }).hide(); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="fields-mapping"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select> <select class="fields-mapping"> <option>Option1</option> <option>Option2</option> <option>Option3</option> </select>
解决方案4
0 2015-04-24 10:42:24
change first box that will hide the option in second box just try this following code: 更改第一个框将在第二个框中隐藏该选项，只需尝试以下代码：
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
</head>
<body>
first box
<select id="first" class="fields-mapping">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
second box
<select id="second" class="fields-mapping">
<option value="Option1">Option1</option>
<option value="Option2">Option2</option>
<option value="Option3">Option3</option>
</select>
<script type="text/javascript">
$('.fields-mapping').change(function () {
var currentId = $(this).attr('id');
var currentSelectItem = $(this).val();
if(currentId =='first'){
$("#second option").css("display","block");
$("#second option[value=" + currentSelectItem + "]").css("display","none");
}
});
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.