手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现密保互斥问题解决方案
jQuery实现密保互斥问题解决方案
摘要:密保互斥问题:密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥。效果如下:下面我用了jque...

密保互斥问题:

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

效果如下:

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

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

密保2:<select></select><br/>

密保3:<select></select>

【jQuery实现密保互斥问题解决方案】相关文章:

JQuery boxy插件在IE中边角图片不显示问题的解决

jquery实现动态改变div宽度和高度

jQuery实现给页面换肤的方法

js光标定位文本框回车表单提交问题的解决方法

jQuery实现返回顶部功能

JQuery实现动态添加删除评论的方法

jQuery实现自动滚动到页面顶端的方法

jQuery实现延迟跳转的方法

jquery简单实现外部链接用新窗口打开的方法

js控制excel打印完美解决方案

精品推荐
分类导航