快捷導(dǎo)航

jQuery實現(xiàn)密?；コ鈫栴}解決方案

更新時間：2013年08月16日 18:18:26 作者：

密保通常都會有n個問題，讓用戶選擇其中2、3個，而且都不會讓用戶選擇重復(fù)的問題。這就要求密?；コ?，具體實現(xiàn)如下，有此需求的朋友可以參考下

密?；コ鈫栴}：
密保通常都會有n個問題，讓用戶選擇其中2、3個，而且都不會讓用戶選擇重復(fù)的問題。這就要求密?；コ?。

效果如下：

下面我用了jquery實現(xiàn)密保互斥，用于解決密保，投票等類似互斥問題，可以支持ie6+，火狐，谷歌，opera等大多數(shù)瀏覽器
demo下載：http://download.csdn.net/download/cwqcwk1/5956141
關(guān)鍵代碼：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
var qObj = { 
elmt:'select', 
tip:'請選擇', 
tVal:'', 
cur:[], 
arr:{ 
1:'你的小學(xué)叫什么名字？', 
2:'你最崇拜的人物是誰？', 
3:'你最喜歡的花名字叫什么？', 
4:'你父親的職業(yè)是？', 
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選框添加監(jiān)聽事件 
elements.change(function(){ 
var 
cValue = {}, //用于記錄當(dāng)前被選中的問題 
elmts = elements, 
cIndex = elmts.index($(this)); //當(dāng)前select選框索引值 
//遍歷所有select選框，記錄當(dāng)前每個選框的選擇 
elmts.each(function(i){ 
qObj.cur[i] = $(this).val(); 
}); 
//記錄當(dāng)前已被選中的問題，實現(xiàn)互斥鎖 
for(var i in qObj.cur){ 
cValue[qObj.cur[i]] = 1; 
} 
//遍歷所有select選框，重置所有問題 
elmts.each(function(i){ 
//跳過當(dāng)前的select選框，因為該內(nèi)容無需校正 
if (cIndex == i) return; 
var html = '<option value="'+ qObj.tVal +'">'+ qObj.tip +'</option>'; 
for(var q in qObj.arr){ 
//如果是互斥內(nèi)容，且不屬于這個選框則跳過（重點） 
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> 