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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
actionscript与javascript的区别
May 25 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
微信小程序 数据封装,参数传值等经验分享
Jan 09 Javascript
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
详解Vue文档中几个易忽视部分的剖析
Mar 24 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
ng-zorro-antd 入门初体验
Dec 03 Javascript
Vue框架TypeScript装饰器使用指南小结
Feb 18 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
JavaScript高级程序设计之基本引用类型
Nov 17 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 FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
Javascript模块模式分析
2008/05/16 Javascript
ext combox 下拉框不出现自动提示,自动选中的解决方法
2010/02/24 Javascript
js 函数的副作用分析
2011/08/23 Javascript
JS 表单验证大全
2011/11/23 Javascript
form.submit()不能提交表单的错误原因及解决方法
2014/10/13 Javascript
window.setInterval()方法的定义和用法及offsetLeft与style.left的区别
2015/11/11 Javascript
jquery原理以及学习技巧介绍
2015/11/11 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
2016/03/28 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
Cpage.js给组件绑定事件的实现代码
2017/08/31 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
JavaScript去掉数组重复项的方法分析【测试可用】
2018/07/19 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
2018/12/29 jQuery
js中arguments对象的深入理解
2019/05/14 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python实现的双色球生成功能示例
2017/12/18 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Sanic框架流式传输操作示例
2018/07/18 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
2015/01/01 HTML / CSS
HTML5 Canvas之测试浏览器是否支持Canvas的方法
2015/01/01 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
美国体育用品商店:Academy Sports + Outdoors
2020/01/04 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
测试时代收集的软件测试面试题
2013/09/25 面试题
计算机毕业大学生推荐信
2013/12/01 职场文书
我的未来不是梦演讲稿
2014/09/02 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
入党申请书怎么写?
2019/06/21 职场文书
Vue.js中v-for指令的用法介绍
2022/03/13 Vue.js