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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
原生JavaScript实现连连看游戏(附源码)
Nov 05 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
完美实现八种js焦点轮播图(下篇)
Apr 20 Javascript
JavaScript性能优化总结之加载与执行
Aug 11 Javascript
Javascript中toFixed计算错误(依赖银行家舍入法的缺陷)解决方法
Aug 22 Javascript
JavaScript 隐性类型转换步骤浅析
Mar 15 Javascript
微信小程序新手教程之页面打开数量限制
Mar 03 Javascript
js回调函数仿360开机
Dec 26 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安装为Apache DSO
2006/10/09 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
对于this和$(this)的个人理解
2013/09/08 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
javascript制作网页图片上实现下雨效果
2015/02/26 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
vue 弹框产生的滚动穿透问题的解决
2018/09/21 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
微信小程序搭建自己的Https服务器
2019/05/02 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
js实现贪吃蛇游戏 canvas绘制地图
2020/09/09 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
给Python初学者的一些编程技巧
2015/04/03 Python
Python中列表元素转为数字的方法分析
2016/06/14 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Django框架中间件(Middleware)用法实例分析
2019/05/24 Python
pycharm工具连接mysql数据库失败问题
2020/04/01 Python
OpenCV灰度化之后图片为绿色的解决
2020/12/01 Python
PHP开发工程师面试问题集锦
2012/11/01 面试题
数据库基础的一些面试题
2012/02/25 面试题
为什么group by 和order by会使查询变慢
2014/05/16 面试题
介绍一下Linux内核的排队自旋锁
2014/08/27 面试题
测绘工程个人的自我评价
2013/11/23 职场文书
合作协议书模板
2014/10/10 职场文书
质检员岗位职责
2015/02/03 职场文书
慈善献爱心倡议书
2015/04/27 职场文书
学校标语口号大全
2015/12/26 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python