<strong>密保互斥问题:</strong> <br>密保通常都会有n个问题,让用户选择其中2、3个,而且都不会让用户选择重复的问题。这就要求密保互斥。<br><br>效果如下: <br><img src="http://files.jb51.net/file_images/article/201308/2013816181454718.jpg?2013716181539" alt="jQuery实现密保互斥问题解决方案_jquery" ><br>下面我用了jquery实现密保互斥,用于解决密保,投票等类似互斥问题,可以支持ie6+,火狐,谷歌,opera等大多数浏览器 <br>demo下载:http://download.csdn.net/download/cwqcwk1/5956141 <br><strong>关键代码:</strong> <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="46433" class="copybut" id="copybut46433" onclick="doCopy('code46433')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code46433"> <br><script type="text/javascript"> <BR>var qObj = { <BR>elmt:'select', <BR>tip:'请选择', <BR>tVal:'', <BR>cur:[], <BR>arr:{ <BR>1:'你的小学叫什么名字?', <BR>2:'你最崇拜的人物是谁?', <BR>3:'你最喜欢的花名字叫什么?', <BR>4:'你父亲的职业是?', <BR>5:'你父亲的姓名?', <BR>6:'你高中班主任的名字?' <BR>} <BR>} <BR>$(function(){ <BR>//获取所有的select选框 <BR>var elements = $(qObj.elmt); <BR>//这一步只是初始化操作,将所有问题写入select选框 <BR>elements.each(function(i){ <BR>var html = '<option value="'+ qObj.tVal +'">'+ qObj.tip +''; <BR>for(var q in qObj.arr){ <BR>html += '<option value="'+ q +'">' + qObj.arr[q] + ''; <BR>} <BR>$(this).html(html); <BR>}); <BR>//select选框添加监听事件 <BR>elements.change(function(){ <BR>var <BR>cValue = {}, //用于记录当前被选中的问题 <BR>elmts = elements, <BR>cIndex = elmts.index($(this)); //当前select选框索引值 <BR>//遍历所有select选框,记录当前每个选框的选择 <BR>elmts.each(function(i){ <BR>qObj.cur[i] = $(this).val(); <BR>}); <BR>//记录当前已被选中的问题,实现互斥锁 <BR>for(var i in qObj.cur){ <BR>cValue[qObj.cur[i]] = 1; <BR>} <BR>//遍历所有select选框,重置所有问题 <BR>elmts.each(function(i){ <BR>//跳过当前的select选框,因为该内容无需校正 <BR>if (cIndex == i) return; <BR>var html = '<option value="'+ qObj.tVal +'">'+ qObj.tip +''; <BR>for(var q in qObj.arr){ <BR>//如果是互斥内容,且不属于这个选框则跳过(重点) <BR>if (cValue[q] && q != qObj.cur[i]) continue; <BR>html += '<option value="'+ q +'"' + (q == qObj.cur[i]?' selected="selected"': '') + '>' + qObj.arr[q] + ''; <BR>} <BR>$(this).html(html); <BR>}); <BR>}); <BR>}) <BR></script> <br>密保1:<select style="width:180px"></select><br> <br>密保2:<select style="width:180px"></select><br> <br>密保3:<select style="width:180px"></select> <br> </div>