jQuery实现密保互斥问题解决方案

密保互斥问题：
密保通常都会有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>

赞 (0)

相关推荐

  • jQuery ajax MD5实现用户注册即时验证功能

    jQuery ajax MD5实现用户注册即时验证功能

    实际项目中比较常用的(JQuery+AJAX+MD5),属于即时验证,亮点是验证用户是否存在的那一项,具体内容如下 具体示例 registe.jsp <span style="font-size: large;"><%@ page pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"

  • jQuery实现提示密码强度的代码

    如何实现色条随输入密码长度变化效果: 在很多网站注册页面都有这样的功能,当用户输入密码的时候,下面会出现一个色条,色条的长度会跟随输入密码的长度变化,并且色条的颜色也会根据输入密码长度的不同有所改变,一般是用来提示密码强度.下面就简单介绍一下使用jQuery如何实现此功能.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</tit

  • 基于JQuery的密码强度验证代码

    基于JQuery的密码强度验证代码

       因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS.JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js 这个控件的JS文件:password_strength_plugin.js password_strength_plugin.js 复制代码 代码如下: (function($){ $.fn.shortPass = 'Too short'; $.fn.badPass = 'Weak'; $.f

  • jquery插件开发之实现md5插件

    方法返回的是一串十进制数,在jquery1.9.2下测试通过. 复制代码 代码如下: (function($){ $.md5 = function(o) {  if(null === o) {   return 'null';  }  if(typeof o != "string") {   return 'null';  }  //计算填充的长度  var fill_data_len = 0;  var data_len = o.length;  var d_l_mod = data

  • 密码框显示提示文字jquery示例

    复制代码 代码如下: <html> <head> <title>登录</title> <script type="text/javascript" src="./jquery-1.3.2.min.js"></script> <script> $(document).ready(function(){ $(".text_login").focus(function(

  • jquery判断输入密码两次是否相等

    Jquery easyui是一个非常好的ui框架,但是表单验证中没有最常用的判断两个输出框中值相等的验证,所以我做了下扩展. $.extend($.fn.validatebox.defaults.rules, { /*必须和某个字段相等*/ equalTo: { validator:function(value,param){ return $(param[0]).val() == value; }, message:'字段不匹配' } }); 使用示例: 密码: <input id="p

  • jQuery MD5加密实现代码

    $(md("你想要加密的字符串")); md5插件下载地址:http://xiazai.jb51.net/201003/yuanma/jquery_md5.rar 下面是我的简单例子 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  • jquery密码强度校验

    jquery密码强度校验

    本文实例讲述了jquery密码强度校验的验证代码,分享给大家供大家参考.具体如下: 预想的效果截图如下: 关键代码: <script> //下面的正则表达式建议各位收藏哦,项目上有可能会用得着 $(function(){ $('#pass').blur(function(e) { // alert('---------'); //密码为八位及以上并且字母数字特殊字符三项都包括 var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=

  • jQuery随机密码生成的方法

    本文实例讲述了jQuery随机密码生成的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: $.extend({   password: function (length, special) {     var iteration = 0;     var password = "";     var randomNumber;     if(special == undefined){         var special = false;     }     w

  • jQuery简单实现MD5加密的方法

    jQuery简单实现MD5加密的方法

    本文实例讲述了jQuery简单实现MD5加密的方法.分享给大家供大家参考,具体如下: 1.问题背景 有两个输入框,一个输入明文,另一个输入框显示密文 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现MD5加密</title> <script type="text/javascript"

  • jQuery判断密码强度实现思路及代码

    jQuery判断密码强度实现思路及代码

    复制代码 代码如下: <head> <title></title> <script src="jquery-1.9.1.js" type="text/javascript"></script> <style type="text/css"> .qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height

  • PHP结合jQuery实现找回密码

    通常所说的密码找回功能不是真的能把忘记的密码找回,因为我们的密码是加密保存的,一般开发者会在验证用户信息后通过程序生成一个新密码或者生成一个特定的链接并发送邮件到用户邮箱,用户从邮箱链接到网站的重置密码模块重新设置新密码. 当然现在有的网站也有手机短信的方式找回密码,原理就是通过发送验证码来验明正身,和发送邮件验证一样,最终还是要通过重置密码来完成找回密码的流程. 一般步骤是: 1.表单输入注册时的邮箱: 2.验证用户邮箱是否正确,如果用户邮箱不存在网站的用户表中,则提示用户邮箱未注册: 3.发

  • jQuery插件passwordStrength密码强度指标详解

    jQuery插件passwordStrength密码强度指标详解

    passwordStrength插件能够根据用户输入的密码,以图形化方式显示密码的强度. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>passwordStrength</title> <link href="css/style.css" rel=

随机推荐