设置两个下拉框的下拉选项互斥
现在有个业务场景,就是同⼀个页⾯上有两个下拉框,第⼆个下拉框中的选项去掉第⼀个下拉框选中的值(互斥)。
实现的⽅式就是动态⽣成下拉框的option选项,代码⽅式如下:
⼀、⾸先先获取下拉框所有选项的dom元素
var Alloptions = $(".single").clone();
⼆、
setSelectDisabled(".pairTow", $('.pairOne option:selected').val()); //pairOne为左边下拉框的class;pairTwo为右下拉框calss function setSelectDisabled(id, selectVal) {
var oldValue = $(id).val();
$(id).find('option').remove();
Alloptions.find("option").each(function(){
var option = $(this).clone();
var val = option.attr("value");
if (oldValue==val) {
// 默认选择原来的值
jquery获取下拉框选中值option.attr("selected",true);
}
if(option.val()!=selectVal){
$(id).append(option);
}
});
// 如果当前选择的已经被选择了,那就默认选择第⼀个了
if (oldValue==selectVal) {
$(id).find('option').eq(0).attr("selected",true);
}
}
通过循环组装,即可⽣成新的互斥下拉选项。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论