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 常见操作实现方式和常用函数方法总结
May 06 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
JavaScript中按位“异或”运算符使用介绍
Mar 14 Javascript
对之前写的jquery分页做下升级
Jun 19 Javascript
js实现div弹出层的方法
Nov 20 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
Aug 01 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
JQueryDOM之样式操作
Mar 27 jQuery
vue插槽slot的理解和使用方法
Apr 03 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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 session和cookie使用说明
2010/04/07 PHP
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php中关于换行的实例写法
2019/09/26 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
JavaScript开发规范要求(规范化代码)
2010/08/16 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jquery popupDialog 使用 加载jsp页面的方法
2016/10/25 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
详解vue axios中文文档
2017/09/12 Javascript
mescroll.js上拉加载下拉刷新组件使用详解
2017/11/13 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Python运算符重载用法实例分析
2015/06/01 Python
python实现k-means聚类算法
2018/02/23 Python
Python3实现计算两个数组的交集算法示例
2019/04/03 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
利用python绘制数据曲线图的实现
2020/04/09 Python
python利用后缀表达式实现计算器功能
2021/02/22 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
艺术设计专业个人求职信范文
2013/12/11 职场文书
成品仓管员工作职责
2013/12/29 职场文书
安踏广告词改编版
2014/03/21 职场文书
应届毕业生求职信范文
2014/05/08 职场文书
快递员岗位职责
2014/09/12 职场文书
“九一八事变纪念日”国旗下讲话稿
2014/09/14 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
Django项目配置Memcached和Redis, 缓存选择哪个更有优势
2021/04/06 Python
浅谈Python数学建模之数据导入
2021/06/23 Python