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

 更新时间:2013年08月16日 18:18:26   作者:  
密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥,具体实现如下,有此需求的朋友可以参考下
密保互斥问题:
密保通常都会有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>

相关文章

  • 原生Ajax 和jQuery Ajax的区别示例分析

    原生Ajax 和jQuery Ajax的区别示例分析

    这篇文章主要介绍了原生Ajax 和Jq Ajax的区别示例分析,需要的朋友可以参考下
    2014-12-12
  • jquery+json实现的搜索加分页效果

    jquery+json实现的搜索加分页效果

    Javascript,json 实现的js 脚本搜索,加分页,附源码
    2010-03-03
  • jQuery延迟执行的实现方法

    jQuery延迟执行的实现方法

    这篇文章主要介绍了jQuery延迟执行的实现方法,结合简单实例形式分析了jQuery针对无法同步执行的情况使用延迟执行的操作技巧,需要的朋友可以参考下
    2016-12-12
  • JQuery中$.each 和$(selector).each()的区别详解

    JQuery中$.each 和$(selector).each()的区别详解

    这篇文章主要介绍了JQuery中$.each 和$(selector).each()的区别详解,本文给出了多个例子讲解了它们之间的不同之处,需要的朋友可以参考下
    2015-03-03
  • jQuery Validate插件实现表单验证

    jQuery Validate插件实现表单验证

    这篇文章主要为大家详细介绍了jQuery Validate插件实现表单验证的相关资料,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • jQuery使用children()找到特定元素的子元素

    jQuery使用children()找到特定元素的子元素

    children()是jQuery中的内置方法,用于查找与所选元素相关的所有子元素, jQuery中的children()方法向下遍历到所选元素的单个级别并返回所有元素,我们还可以在children()的参数中添加过滤器、使用children()来定位特定的子元素以及使用each()方法来迭代子元素等
    2023-11-11
  • 分享jQuery网页元素拖拽插件

    分享jQuery网页元素拖拽插件

    这篇文章主要介绍了jQuery网页元素拖拽插件的实现代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-06-06
  • jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

    jQuery(1.6.3) 中css方法对浮动的实现缺陷分析

    JavaScript中设置元素的浮动属性(float),标准浏览器使用cssFloat,IE旧版本使用styleFloat。
    2011-09-09
  • jQuery实现自定义下拉列表

    jQuery实现自定义下拉列表

    这篇文章主要介绍了使用jQuery实现自定义下拉列表的方法及代码分享,效果非常不错,兼容性也很棒,这里推荐给小伙伴们。
    2015-01-01
  • JQuery实现Table的tr上移下移功能

    JQuery实现Table的tr上移下移功能

    这篇文章主要为大家详细介绍了JQuery实现Table的tr上移下移功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-02-02

最新评论