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获取元素样式属性值的方法
Dec 25 Javascript
Javascript selection的兼容性写法介绍
Dec 20 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
jQuery定义插件的方法
Dec 18 Javascript
简单学习vue指令directive
Nov 03 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
Dec 21 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
微信小程序中显示html格式内容的方法
Apr 25 Javascript
vue-cli的eslint相关用法
Sep 29 Javascript
在 React、Vue项目中使用SVG的方法
Feb 09 Javascript
Angular ElementRef简介及其使用
Oct 01 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 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 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
PHP 文件系统详解
2012/09/13 PHP
php生成扇形比例图实例
2013/11/06 PHP
PHP中的魔术方法总结和使用实例
2015/05/11 PHP
javascript 写类方式之一
2009/07/05 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
原生js 秒表实现代码
2012/07/24 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
Jquery实现简单的轮播效果(代码管用)
2016/03/14 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
2016/05/27 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
2018/05/16 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
python发腾讯微博代码分享
2014/01/10 Python
python求斐波那契数列示例分享
2014/02/14 Python
python获取各操作系统硬件信息的方法
2015/06/03 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python3中列表list合并的四种方法
2019/04/19 Python
Django+Uwsgi+Nginx如何实现生产环境部署
2020/07/31 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
俄罗斯最大的隐形眼镜销售网站:Ochkov.Net
2021/02/07 全球购物
Goodee官方商店:迷你投影仪
2021/03/15 全球购物
服装行业创业计划书范文
2014/02/05 职场文书
经典而简洁的婚礼主持词
2014/03/13 职场文书
环保倡议书100字
2014/05/15 职场文书
本科毕业生自荐信
2014/06/02 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
NASA 机智号火星直升机拍到了毅力号设备碎片
2022/04/29 数码科技