1 <div> 2 <select id="ddlList1" class="my_select_box" data-placeholder="Select Your Options"> 3 <option value="1">Option 1</option> 4 <option value="2" selected>Option 2</option> 5 <option value="3" disabled>Option 3</option> 6 </select> 7 </div> 8 <div> 9 <select id="ddlList2" class="my_select_box" data-placeholder="Select Your Options"> 10 <option value="1">Option 1</option> 11 <option value="2" selected>Option 2</option> 12 <option value="3" disabled>Option 3</option> 13 </select> 14 </div>
解决ddlList1的Option 1选项选择时ddlList2的Option 1选项失效,或ddlList2的Option 1选项选择时ddlList1的Option 1选项失效,即两个下拉框中的选项互斥的需求,方法如下:
1 $("#ddlList1").chosen().change(function (evt, arg) { 2 if (arg && arg.selected && $("#ddlList2 option[value='" + arg.selected + "']")) { 3 $("#ddlList2 option[value='" + arg.selected + "']").attr("disabled", ""); 4 } else if (arg && arg.deselected) { 5 $("#ddlList2 option[value='" + arg.deselected + "']").removeAttr("disabled"); 6 } else { 7 return; 8 } 9 10 $("#ddlList2").trigger("chosen:updated"); 11 }); 12 13 $("#ddlList2").chosen().change(function (evt, arg) { 14 if (arg && arg.selected) { 15 $("#ddlList1 option[value='" + arg.selected + "']").attr("disabled", ""); 16 } else if (arg && arg.deselected) { 17 $("#ddlList1 option[value='" + arg.deselected + "']").removeAttr("disabled"); 18 } else { 19 return; 20 } 21 22 $("#ddlList1").trigger("chosen:updated"); 23 });