[英]jQuery hide selected option in next select box
我想在第二個選擇的第一個選擇框中隱藏所選的選項。 我的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>
我希望在打開第二選擇框或使用jQuery的台鉗時隱藏在第一選擇框中選擇的選項。 有什么好的做法？
是這樣嗎
$('.fields-mapping').select(function () {
$('option:selected', this).hide(); });
您可以使用filter()函數在其他具有匹配值的select元素中查找所有option元素，並將其隱藏。 嘗試這個：
$('.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();
});
請注意，這適用於任何數量的選擇沒有任何變化工作（只要有足夠多的option那些中的元素select的元素，使從每一個選擇）。
另一個解決方案是使用：contains和：not（：selected）選擇器。 這將使您能夠從另一個選擇框中找到選定的選項。
$(".fields-mapping").change(function() {
var selectedOption = $('option:selected', this).text();
$(".fields-mapping option:contains('" + selectedOption + "'):not(:selected)").hide();
});
JSFiddle： https ://jsfiddle.net/28frmszv/1/
您可以從所有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>
更改第一個框將在第二個框中隱藏該選項，只需嘗試以下代碼：
<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>
在 select2 jquery 或 javascript 中的下一個 select 框中隱藏所選選項
[英]Hide selected option in next select box in select2 jquery or javascript
使用jquery或javascript在選擇框中隱藏重復的選項文本值
[英]Hide repeated option text value in select box using jquery or javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.