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 写类方式之七
Jul 05 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
jQuery实现带有上下控制按钮的简单多行滚屏效果代码
Sep 04 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
JS声明式函数与赋值式函数实例分析
Dec 13 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 Javascript
JS基于面向对象实现的选项卡效果示例
Dec 20 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
小程序rich-text组件如何改变内部img图片样式的方法
May 22 Javascript
小谈angular ng deploy的实现
Apr 07 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 Smarty date_format [格式化时间日期]
2010/03/15 PHP
YII使用url组件美化管理的方法
2015/12/28 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
TNC vs IO BO3 第一场2.13
2021/03/10 DOTA
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
JS中把字符转成ASCII值的函数示例代码
2013/11/21 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
常用javascript表单验证汇总
2020/07/20 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
2016/07/06 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
Vue 如何使用props、emit实现自定义双向绑定的实现
2020/06/05 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
Python检测网络延迟的代码
2018/05/15 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
Python中logging日志库实例详解
2020/02/19 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
python 数据类型强制转换的总结
2021/01/25 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
甲方资料员岗位职责
2013/12/13 职场文书
企业安全隐患排查治理制度
2015/08/05 职场文书
2016大学迎新欢迎词
2015/09/29 职场文书
学习焦裕禄先进事迹心得体会
2016/01/23 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
python内置进制转换函数的操作
2021/06/02 Python
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
SQL Server2019安装的详细步骤实战记录(亲测可用)
2022/06/10 SQL Server