<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>
