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 相关文章推荐
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
Dec 17 Javascript
JavaScript核心语法总结(推荐)
Jun 02 Javascript
基于jQuery实现仿微博发布框字数提示
Jul 27 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
图标线性回归斜着移动到指定的位置
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
ajax实现无刷新分页(php)
2010/07/18 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
关于HTTP传输中gzip压缩的秘密探索分析
2018/01/12 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Android 兼容性问题:java.lang.UnsupportedOperationException解决办法
2017/03/19 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
numpy中矩阵合并的实例
2018/06/15 Python
Pandas读取并修改excel的示例代码
2019/02/17 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
如何安装ruby on rails
2014/02/09 面试题
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
实习单位证明范例
2014/11/17 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
2015年社区纪检工作总结
2015/04/21 职场文书
2015年项目工作总结
2015/04/29 职场文书
迁徙的鸟观后感
2015/06/09 职场文书
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL
Python matplotlib安装以及实现简单曲线的绘制
2022/04/26 Python