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实现继承机制之构造函数方法对象冒充的使用详解
May 07 Javascript
js运动框架_包括图片的淡入淡出效果
May 11 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
jQuery插件实现带圆点的焦点图片轮播切换
Jan 18 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
ajax与json 获取数据并在前台使用简单实例
Jan 19 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jquery ajax异步提交表单数据的方法
Oct 27 jQuery
解决layer.prompt无效的问题
Sep 24 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
基于redis的小程序登录实现方法流程分析
May 25 Javascript
JS实现手风琴特效
Nov 08 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中ob(Output Buffer 输出缓冲)函数使用方法
2007/07/21 PHP
php图像验证码生成代码
2017/06/08 PHP
PHP中str_split()函数的用法讲解
2019/04/11 PHP
用jscript实现列出安装的软件列表
2007/06/18 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
js选项卡的制作方法
2017/01/23 Javascript
基于JavaScript实现移动端无限加载分页
2017/03/27 Javascript
js实现放大镜特效
2017/05/18 Javascript
nodejs+websocket实时聊天系统改进版
2017/05/18 NodeJs
详解vue + vuex + directives实现权限按钮的思路
2017/10/24 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
微信小程序云开发如何使用云函数生成二维码
2019/05/18 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python数据分析模块pandas用法详解
2019/09/04 Python
python matplotlib库的基本使用
2020/09/23 Python
Matlab使用Plot函数实现数据动态显示方法总结
2021/02/25 Python
Skip Hop官网:好莱坞宝宝挚爱品牌
2018/06/17 全球购物
美国领先的男士和女士内衣购物网站:Freshpair
2019/02/25 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
2014年乡镇工作总结
2014/11/21 职场文书
给女朋友的道歉短信
2015/05/12 职场文书
2019年销售人员的职业生涯规划书
2019/03/25 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
总结几个非常实用的Python库
2021/06/26 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python
python套接字socket通信
2022/04/01 Python
JS前端可视化canvas动画原理及其推导实现
2022/08/05 Javascript