如何解决启用禁用基于先前的下拉菜单选择选项?
我有2个下拉菜单,假设选择1并选择2,则场景为 当用户在选择1 上选择下拉菜单并选择A时,在选择2 上,选项A将被禁用。
这是我的代码,实际上这是有效的,
但是我有一个条件,当用户将编辑下拉菜单时,在选择1个用户时已经选择了A,但是仍然选择了2个,我要选择的2中的选项A必须被禁用,但目前仍然启用>
jsfiddle https://jsfiddle.net/q3mu7x2w/
$("#pr_bundling").change(function(){
$("#pr_cross").find("option").each(function(){
$(this).removeAttr("disabled");
});
$("#pr_cross [value=" + $(this).val() + "]").attr("disabled","disabled");
$('#pr_cross').not(this).has('option[value="'+ this.value + '"]:selected').val('noselect29');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
<select class="form-control" id="pr_bundling">
<option value='noselect99' selected >Select</option>
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br>
<h3>select 2</h3>
<select class="form-control" id="pr_cross">
<option value='noselect29' selected >Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
解决方法
通过将更新代码移到函数中并在#pr_bundling
上调用(直接或通过.trigger
),可以确保在页面加载时禁用从$(document).ready
进行的初始选择。
function update_select() {
let selected = $('#pr_bundling').val();
$("#pr_cross").find("option").each(function() {
$(this).removeAttr("disabled");
});
$("#pr_cross [value=" + selected + "]").attr("disabled","disabled");
}
$(document).ready(function() {
$("#pr_bundling").change(update_select);
update_select();
// or you can trigger the change handler:
// $("#pr_bundling").trigger('change');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>select 1</h3>
<select class="form-control" id="pr_bundling">
<option value='noselect99' selected>Select</option>
<option value="A" selected>A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<br>
<h3>select 2</h3>
<select class="form-control" id="pr_cross">
<option value='noselect29' selected>Select</option>
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
<option value="D">D</option>
</select>
,
在禁用选择2的值时,选择器错误。
pClosed
jsfiddle:https://jsfiddle.net/bs7h0got/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。