jQuery实现密保互斥问题解决方案
2013-08-16 00:00
525 查看
密保互斥问题:
密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥。
效果如下:
下面我用了jquery实现密保互斥,用于解决密保,投票等类似互斥问题,可以支持ie6+,火狐,谷歌,opera等大多数浏览器
demo下载:http://download.csdn.net/download/cwqcwk1/5956141
关键代码:
密保通常都会有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>
相关文章推荐
- jQuery实现密保互斥问题解决方案
- jQuery实现密保互斥问题
- jQuery实现密保互斥问题
- JQuery Plugin-TableExport实现前端表格的导出功能(已解决表格pdf导出中文格式问题)
- 图形验证码实现方案(解决短信轰炸问题)
- Reverse Polish Calculator (逆波兰计算器)方案的分析——如何解决问题,从需要到实现
- 多个地方同时向一个文件读写的互斥问题解决方案
- jquery 跨域POST信息问题解决方案
- 原生js实现复制内容到剪切板(解决jquery实现不了的问题)
- 解决jquery实现的radio重新选中的问题
- AngularJs & JQuery 结合使用存在的问题 之 input hidden 问题解决方案
- jquery乱码与contentType属性设置问题解决方案
- mima接收数据时粘包和大小端问题解决方案具体实现
- jquery checkbox 勾选的bug问题解决方案与分析
- [原创]JQuery的autoCompleate插件的使用(内含解决Jquery事件与UpdatePanel互斥的问题,只需要在body中改为如下:<body onload=’load()’></body>即可)
- Jquery实现异步提交表单,解决多表单提交的问题
- jquery demo 部分问题解决方案总结
- JQuery解决GridView控件翻页问题解决方案!
- C#调用exe解决PDF转图片问题(使用PDFBox方案,java语言编译jar包实现)
- jquery 新建的元素事件绑定问题解决方案