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实现的Ajax 验证用户名是否存在的实现代码
Apr 06 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
JavaScript把数组作为堆栈使用的方法
Mar 20 Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 Javascript
Validform表单验证总结篇
Oct 31 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
了解VUE的render函数的使用
Jun 08 Javascript
JS实现碰撞检测的方法分析
Jan 19 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
JS实现容器模块左右拖动效果
Jan 14 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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
详解PHP中的PDO类
2015/07/06 PHP
php版微信公众平台开发之验证步骤实例详解
2016/09/23 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
javascript下给元素添加事件的方法与代码
2007/08/13 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
2013/10/20 Javascript
Javascript变量的作用域和作用域链详解
2015/04/02 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
JS实现响应鼠标点击动画渐变弹出层效果代码
2016/03/25 Javascript
jQuery中队列queue()函数的实例教程
2016/05/03 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
利用AngularJs实现京东首页轮播图效果
2016/09/08 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
2017/08/03 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
不刷新网页就能链接新的js文件方法总结
2020/03/01 Javascript
Python完全新手教程
2007/02/08 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
python访问hdfs的操作
2020/06/06 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
汉森批发:Hansen Wholesale
2018/05/24 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
护理工作感言
2014/01/16 职场文书
自我鉴定书
2014/03/24 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2015国庆节感想
2015/08/04 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
SQL Server中锁的用法
2022/05/20 SQL Server