$('.input-group select').change(function() {
var value = $(this).val();
alert($('.input-group select').siblings('select').children('option').length);
$(this).siblings('select').children('option').each(function() {
if ( $(this).val() === value ) {
$(this).attr('disabled', true).siblings().removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="input-group 1">
<select name="select1">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</div>
<div class="input-group 2">
<select name="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</div>
我有以下代码，并且想要选择 select 中的选项，以便当用户在第一个值 A 中选择时，该值在第二个选择框中被禁用，反之亦然。
我找到了 jQuery 的兄弟姐妹，但我无法在 div 中选择它......我哪里做错了？
请尝试这个...
这里的假设是只有两个selectHTML 中的框应设计此功能：
$ = jQuery;
$("#select1, #select2").on("change", function() {
if($(this).attr("id") == "select1"){
src = "#select1"; target="#select2";
}
else{
src = "#select2"; target="#select1";
}
$(target).children().removeAttr("disabled");
$(target).find("option[value="+$(src).val()+"]").attr("disabled", "disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input-group 1">
<select id="select1">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</div>
<div class="input-group 2">
<select id="select2">
<option>No Match</option>
<option value="1">Test</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
</select>
</div>
EDIT
更新了 jQuery 以解决评论部分中表达的问题。这里所做的一个假设是，新的select将以与现有盒子类似的方式添加盒子，即在新的盒子下<div class="input-group">。因此，根据给定的 HTML 布局，更新后的 jQuery 将是：
$("select").on("change", function(){
$(this).parent().siblings().find("option").removeAttr("disabled");
$(this).parent().siblings()
.find("option[value="+$(this).val()+"]").attr("disabled", "disabled");
});
建议：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
