jQuery实现密保互斥问题解决方案 |
本文标签:jQuery,密保互斥 密保互斥问题: 密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题 。这就要求密保互斥 。 效果如下: ![]() 下面我用了jquery实现密保互斥,用于解决密保,投票等类似互斥问题,可以支持ie6+,火狐,谷歌,opera等大多数浏览器 demo下载:http://download.csdn.net/download/cwqcwk1/5956141 关键代码: 复制代码 代码如下: <script type="text/javascript"> var qObj = { elmt:select, tip:请选择, tVal:, cur:[], arr:{ 1:你的小学叫什么名字?, 2:你最崇拜的人物是谁?, 3:你最喜欢的花名字叫什么?, 4:你父亲的职业是?, 5:你父亲的姓名?, 6:你高中班主任的名字? } } $(function(){ //获取所有的select选框 var elements = $(qObj.elmt); //这一步只是初始化操作,将所有问题写入select选框 elements.each(function(i){ var html = <option value="+ qObj.tVal +">+ qObj.tip +</option>; for(var q in qObj.arr){ html += <option value="+ q +"> + qObj.arr[q] + </option>; } $(this).html(html); }); //select选框添加监听事件 elements.change(function(){ var cValue = {}, //用于记录当前被选中的问题 elmts = elements, cIndex = elmts.index($(this)); //当前select选框索引值 //遍历所有select选框,记录当前每个选框的选择 elmts.each(function(i){ qObj.cur[i] = $(this).val(); }); //记录当前已被选中的问题,实现互斥锁 for(var i in qObj.cur){ cValue[qObj.cur[i]] = 1; } //遍历所有select选框,重置所有问题 elmts.each(function(i){ //跳过当前的select选框,因为该内容无需校正 if (cIndex == i) return; var html = <option value="+ qObj.tVal +">+ qObj.tip +</option>; for(var q in qObj.arr){ //如果是互斥内容,且不属于这个选框则跳过(重点) if (cValue[q] && q != qObj.cur[i]) continue; html += <option value="+ q +" + (q == qObj.cur[i]? selected="selected": ) + > + qObj.arr[q] + </option>; } $(this).html(html); }); }); }) </script> 密保1:<select style="width:180px"></select><br/> 密保2:<select style="width:180px"></select><br/> 密保3:<select style="width:180px"></select> |