密保互斥问题:

密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥。

效果如下:

下面我用了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>

jQuery实现密保互斥问题的更多相关文章

  1. jQuery新版本没有了Toggle事件,两个按钮分别控制隐藏显示,同时这两个按钮点击也要互斥。

    十二月没来得及整理发布,一直在草稿箱.现在已经2019年1月了... 需求大概是这样的 //XX点击事件 var flagBar = 0; $("#doNotBaseRate"). ...

  2. 简单的JavaScript互斥锁

    去年有几个项目需要使用JavaScript互斥锁,所以写了几个类似的,这是其中一个: //Published by Indream Luo //Contact: indreamluo@qq.com / ...

  3. 深入学习jQuery的三种常见动画效果

    × 目录 [1]显隐效果 [2]高度变化 [3]淡入淡出 前面的话 动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画 ...

  4. 深入学习jQuery样式操作

    × 目录 [1]设置样式 [2]增加样式 [3]删除样式[4]切换样式[5]判断样式[6]样式操作 前面的话 使用javascript脚本化CSS是一个系列,包括行间样式.计算样式.CSS类.样式表. ...

  5. jQuery同步Ajax带来的UI线程阻塞问题及解决办法

    俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下. 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则 ...

  6. 读jQuery源码 - Deferred

    Deferred首次出现在jQuery 1.5中,在jQuery 1.8之后被改写,它的出现抹平了javascript中的大量回调产生的金字塔,提供了异步编程的能力,它主要服役于jQuery.ajax ...

  7. jQuery基础--样式篇(5)

    jQuery的属性与样式 (1).attr()与.removeAttr():每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息. attr()有4个表达式 attr(传入 ...

  8. JQuery基础汇总

    1. 对象获取与赋值::$("#obj").val("Hello World!"); 2. 对象的显示与隐藏:$("#obj").show( ...

  9. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

随机推荐

  1. 配置中的address不能重复

    <jaxws:endpoint  implementor="com.service.imp.UserServiceImpl" address="/user" ...

  2. 启动php-fpm报错:please specify user and group other than root

    安装好PHP之后启动报错: 启动php-fpm报错:please specify user and group other than root, pool 'default 修改 php-fpm.co ...

  3. 【原】AVAudio录制,播放 (解决真机播放音量太小)

    原文链接:http://www.cnblogs.com/A--G/p/4624526.html 最近学习AVFoundation里的audio操作,最基本的录制和播放,参考了一个Code4pp的 一个 ...

  4. 关于typedef int(*lpAddFun)(int, int)

    lpAddFun是typedef定义的一个名称 可以用来定义变量 比如 lpAddFun p; 那 p就是 int(*p)(int, int); 首先(*p)说明p是一个指针,(*p)();说明p指向 ...

  5. eclipse慢 优化(转)

    1.打开 eclipse.ini -showsplash com.genuitec.myeclipse.product --launcher.XXMaxPermSize 256M -vmargs -D ...

  6. Linux系统中,main函数的执行过程

    http://blog.csdn.net/rrerre/article/details/6728431

  7. js 得到当前季度

    Date.prototype.getQuarter = function() { var month = this.getMonth(); if(month < 3) { return '第一季 ...

  8. Java JNDI Datasource HOW-TO Problem

    在开发JAVA的时候发生了点问题,解决方案记录一下,在这里http://tomcat.apache.org/tomcat-7.0-doc/jndi-datasource-examples-howto. ...

  9. Eclipse+Pydev +Django搭建开发环境时容易出错的几点

    1.注意安装的软件和系统的位数是否匹配. 2.安装Django框架的时候注意是否安装了setuptools工具.在Python中,安装第三方模块,是通过setuptools这个工具完成的.Python ...

  10. Tomcat 9.0安装配置

    本文转自:http://blog.sina.com.cn/s/blog_15126e2170102w5o8.html 一.JDK的安装与配置 1.从官网下载jdk,注意是jdk不是jre.最好从官网下 ...