关于下拉框列表不可选择相同值的设置一:当前下拉框不可选
2017-04-12 17:54
429 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>测试-当前元素不可选</title> <style> .ipt { border: 1px solid #ddd; box-shadow: 0 0 3px rgba(0, 0, 0, 0.17) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; border-radius: 0 !important; -moz-border-radius: 0 !important; -webkit-border-radius: 0 !important; height: 34px; padding: 0px 5px; line-height: 30px\9; } </style> </head> <body> <div> description:选择的时候,如果已经选择了1,则下一个下拉框就不能选择1的选项,以此类推。 </div> <select class="ipt sortList"> <option value="0">请选择</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select class="ipt sortList"> <option value="0">请选择</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select class="ipt sortList"> <option value="0">请选择</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select class="ipt sortList"> <option value="0">请选择</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <select class="ipt sortList"> <option value="0">请选择</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> <script src="//cdn.bootcss.com/jquery/2.2.3/jquery.js"></script> <script> var _this=''; $(".sortList").on({ click:function(){ _this=$(this).find("option:selected").val(); console.log("_beforeChangethis:"+_this); }, change:function(){ console.log("_changeThis:"+_this); chageSort() } }) function chageSort(){ var sortList=$(".sortList"); for(var i=0;i<sortList.length;i++){ var isSelectedVal=sortList.eq(i).find("option:selected").val(); for(var j=0;j<sortList.length;j++){ if(isSelectedVal!=0 && j!=i){ sortList.eq(j).find("option[value='"+isSelectedVal+"']").attr("disabled",true); } } console.log("isSelectedVal:"+isSelectedVal); } for(var k=0;k<sortList.length;k++){ sortList.eq(k).find("option[value='"+_this+"']").removeAttr("disabled"); } } </script> </body> </html>
相关文章推荐
- 关于下拉框列表不可选择相同值的设置二:重置前一项相同选择
- 设置DropDownList下拉列表选择项
- [DevExpress]设置RepositoryItemComboBox只可下拉选择不可编辑
- select 设置下拉列表的选中项的值 显示当前日期 年份 月份 下拉列表获取当前日期
- QCombobox设置下拉框的宽度(设置QComboBox的下拉框Item高度|下拉框下拉列表的高度)
- 关于select下拉框最后一项鼠标经过不能变色及设置宽度后下拉框无法滚动的bug?
- swing 组合框(下拉框)选中记录,设置下拉列表
- ExtJS中设置下拉列表不可编辑
- 关于下拉列表的设置问题
- Jquery-下拉列表设置默认选择
- 在请求的参数中设置可选值列表为当前职责可访问的所有OU
- 关于JS下拉列表选择时间计算时间周期的问题解决
- Excel中设置下拉列表的来源怎么选择其他工作表的内容
- JS中select框中控制下拉列表部分可选部分不可选
- Excel 如何 设置 下拉列表 下拉框
- 关于在GridView模版里添加DropDownList实现根据下拉列表的不同选择gridview根据条件筛选显示。
- 关于下拉列表的高级应用(可选可写)
- Eric的日期选择下拉列表小控件
- 日期选择下拉列表小控件
- 打造完美SWT日期选择控件:(三)看上去像下拉列表