密保互斥问题:

密保通常都会有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. 【转载】ASP.NET线程安全与静态变量的生命周期浅谈

    ASP.NET线程安全所涉及的是什么呢?让我们先来看看静态变量的生命周期问题,下面是我理解的静态变量的生命周期: void Application_Start开始 void Application_E ...

  2. C#多线程lock解决数据同步

    1.代码实例: public class ThreadTest4 { public static void Init() { //多个线程修改同一个值,使用lock锁解决并发 ; i < ; i ...

  3. C#(WinForm)上传图片保存到数据库和从数据库读取图片显示到窗体

    //浏览图片 private void btnUp_Click(object sender, EventArgs e) { OpenFileDialog ofd = new OpenFileDialo ...

  4. jquery $.each遍历json数组方法

    <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/ ...

  5. java 安卓开发之文件的读与写

    java文件的读与写,代码: String file="user.txt"; private void writeFileData(String str1, String str2 ...

  6. (转载)小课堂UI-Star Diamond Tutorial

  7. chrome扩展,如何阻止浏览自动关闭桌面通知.

    (!!!!以前的好用的, 现在不行了~) 做chrome扩展桌面通知, 可能不想让浏览器自动关闭某个重要的桌面通知.那就不要使用 chrome.notifications.create 可以用 Web ...

  8. 二分查找里的upper bound与lower bound的实现与分析

    1. 问题引入 最近参选了学堂在线的课程数据结构(2015秋).课程由清华大学的邓俊辉老师主讲,在完成课后作业时,遇到了这样一个题目范围查询.在这个题目中,我需要解决这样一个子问题:给定了一组已经排好 ...

  9. [Python笔记]第九篇:re正则表达式

    一.正则表达式基础 1.正则表达式介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法,但功能十分 ...

  10. (转:亲测)cnblogs博文浏览[推荐、Top、评论、关注、收藏]利器代码片段

    authour: Others(hoojo) updatetime: 2015-04-25 09:30:23 friendly link: http://www.cnblogs.com/hoojo/a ...