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 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
动态调用CSS文件的JS代码
Jul 29 Javascript
Web前端设计模式  制作漂亮的弹出层
Oct 29 Javascript
一些javascript一些题目的解析
Dec 25 Javascript
jQuery中ajax和post处理json的不同示例对比
Nov 02 Javascript
Java File类的常用方法总结
Mar 18 Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
微信小程序实现转盘抽奖
Sep 21 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
Protoss兵种介绍
2020/03/14 星际争霸
php解析json数据实例
2014/08/19 PHP
php执行多个存储过程的方法【基于thinkPHP】
2016/11/08 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
2011/09/21 Javascript
jQuery对下拉框,单选框,多选框的操作
2014/02/21 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
JS返回顶部实例代码
2020/08/09 Javascript
nodeJs实现基于连接池连接mysql的方法示例
2018/02/10 NodeJs
微信小程序云开发实现云数据库读写权限
2019/05/17 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
解决Idea、WebStorm下使用Vue cli脚手架项目无法使用Webpack别名的问题
2019/10/11 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
2019/10/23 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python3简单实现微信爬虫
2015/04/09 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
python飞机大战 pygame游戏创建快速入门详解
2019/12/17 Python
python实现MySQL指定表增量同步数据到clickhouse的脚本
2021/02/26 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
进口业务员岗位职责
2014/04/06 职场文书
保护环境倡议书范文
2014/05/13 职场文书
大专生自荐书范文
2014/06/22 职场文书
党的生日活动方案
2014/08/15 职场文书
群众路线领导对照材料
2014/08/23 职场文书
房屋租赁委托书范本
2014/10/04 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书