jQuery实现密保互斥问题解决方案


Posted in Javascript onAugust 16, 2013

密保互斥问题:
密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥。

效果如下:
jQuery实现密保互斥问题解决方案
下面我用了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>
Javascript 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
javascript中eval函数用法分析
Apr 25 Javascript
ionic js 复选框 与普通的 HTML 复选框到底有没区别
Jun 06 Javascript
JavaScript判断是否是微信浏览器
Jun 13 Javascript
瀑布流的实现方式(原生js+jquery+css3)
Jun 28 Javascript
javascript数组去重方法分析
Dec 15 Javascript
jQuery.ajax向后台传递数组问题的解决方法
May 12 jQuery
js获取一组日期中最近连续的天数
May 25 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
Vue使用axios引起的后台session不同操作
Aug 14 Javascript
解决VUE项目使用Element-ui 下拉组件的验证失效问题
Nov 07 Javascript
图标线性回归斜着移动到指定的位置
Aug 16 #Javascript
jquery实现图片裁剪思路及实现
Aug 16 #Javascript
求数组最大最小值方法适用于任何数组
Aug 16 #Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 #Javascript
JavaScript版TAB选项卡效果实例
Aug 16 #Javascript
javascript同页面多次调用弹出层具体实例代码
Aug 16 #Javascript
网站404页面3秒后跳到首页的实例代码
Aug 16 #Javascript
You might like
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
顶部缓冲下拉菜单导航特效的JS代码
2013/08/27 Javascript
JS简单操作select和dropdownlist实例
2014/11/26 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
深入浅析js原型链和vue构造函数
2018/10/25 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
vue3.0 上手体验
2020/09/21 Javascript
vue 中使用print.js导出pdf操作
2020/11/13 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
[01:13:51]TNC vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python实现提取文章摘要的方法
2015/04/21 Python
python批量制作雷达图的实现方法
2016/07/26 Python
将Django项目部署到CentOs服务器中
2018/10/18 Python
Python实现批量修改图片格式和大小的方法【opencv库与PIL库】
2018/12/03 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
美国面料纺织品商城:Fabric.com
2017/06/28 全球购物
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
澳大利亚在线百货商店:Real Smart
2017/08/13 全球购物
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
学校政风行风评议工作总结
2014/10/21 职场文书
民政局2016年“六一”儿童节慰问活动总结
2016/04/06 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript