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 圆形旋转图片滚动切换效果
Jan 19 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 Javascript
js对图片base64编码字符串进行解码并输出图像示例
Mar 17 Javascript
js控制容器隐藏出现防止样式变化的两种方法
Apr 25 Javascript
原生js编写焦点图效果
Dec 08 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
vue里的data要用return返回的原因浅析
May 28 Javascript
关于vue路由缓存清除在main.js中的设置
Nov 06 Javascript
element-ui tree结构实现增删改自定义功能代码
Aug 31 Javascript
在Vue中使用Select选择器拼接label的操作
Oct 22 Javascript
JS时间戳与日期格式互相转换的简单方法示例
Jan 30 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
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
php的计数器程序
2006/10/09 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
php ZipArchive压缩函数详解实例
2013/11/06 PHP
php+xml编程之SimpleXML的应用实例
2015/01/24 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
在html页面上拖放移动标签
2010/01/08 Javascript
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
jQuery.uploadify文件上传组件实例讲解
2016/09/23 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
axios全局请求参数设置,请求及返回拦截器的方法
2018/03/05 Javascript
JavaScript基础心法 数据类型
2018/03/05 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
详解关于element级联选择器数据回显问题
2019/02/20 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
[01:30:54]《加油DOTA》 第三期
2014/08/18 DOTA
python实现探测socket和web服务示例
2014/03/28 Python
在Python中使用gRPC的方法示例
2018/08/08 Python
python防止随意修改类属性的实现方法
2019/08/21 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Original Penguin美国官网:布拉德皮特、强尼德普喜爱的服装品牌
2016/10/25 全球购物
喷漆工的岗位职责
2014/03/17 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
基层党支部整改方案
2014/10/25 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
js Proxy的原理详解
2021/05/25 Javascript
进行数据处理的6个 Python 代码块分享
2022/04/06 Python