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的message插件实现右下角弹出消息框
Jan 11 Javascript
JS实用的动画弹出层效果实例
May 05 Javascript
js为什么不能正确处理小数运算?
Dec 29 Javascript
JavaScript常用本地对象小结
Mar 28 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 Javascript
layui radio单选限制下一个radio单选的实例
Sep 03 Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 Javascript
Jquery Fade用法详解
Nov 06 jQuery
利用uni-app生成微信小程序的踩坑记录
Apr 05 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设计模式 Visitor 访问者模式
2011/06/28 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php通过pecl方式安装扩展的实例讲解
2018/02/02 PHP
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
JavaScript中的setUTCDate()方法使用详解
2015/06/11 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
2015/10/27 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
Backbone中View之间传值的学习心得
2016/08/09 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
vue 通过绑定事件获取当前行的id操作
2020/07/27 Javascript
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[14:19]2018年度COSER大赛-完美盛典
2018/12/16 DOTA
在Python中编写数据库模块的教程
2015/04/29 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
浅述python2与python3的简单区别
2018/09/19 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Python内置异常类型全面汇总
2020/05/28 Python
CSS3 animation实现逐帧动画效果
2016/06/02 HTML / CSS
Farfetch中文官网:奢侈品牌时尚购物平台
2020/03/15 全球购物
N:Philanthropy官网:美国洛杉矶基础款服装
2020/06/09 全球购物
《囚绿记》教学反思
2014/03/01 职场文书
总经理任命书
2014/03/29 职场文书
自我检讨书怎么写
2015/05/07 职场文书
自考生自我评价
2019/06/21 职场文书
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技