jQuery實現(xiàn)密保互斥問題解決方案
更新時間:2013年08月16日 18:18:26 作者:
密保通常都會有n個問題,讓用戶選擇其中2、3個,而且都不會讓用戶選擇重復(fù)的問題。這就要求密?;コ猓唧w實現(xiàn)如下,有此需求的朋友可以參考下
密保互斥問題:
密保通常都會有n個問題,讓用戶選擇其中2、3個,而且都不會讓用戶選擇重復(fù)的問題。這就要求密保互斥。
效果如下:

下面我用了jquery實現(xiàn)密保互斥,用于解決密保,投票等類似互斥問題,可以支持ie6+,火狐,谷歌,opera等大多數(shù)瀏覽器
demo下載:http://download.csdn.net/download/cwqcwk1/5956141
關(guān)鍵代碼:
<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>
密保通常都會有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>
您可能感興趣的文章:
- jQuery MD5加密實現(xiàn)代碼
- jQuery ajax MD5實現(xiàn)用戶注冊即時驗證功能
- jquery插件開發(fā)之實現(xiàn)md5插件
- 基于JQuery的密碼強(qiáng)度驗證代碼
- jquery判斷輸入密碼兩次是否相等
- jQuery判斷密碼強(qiáng)度實現(xiàn)思路及代碼
- 密碼框顯示提示文字jquery示例
- jquery密碼強(qiáng)度校驗
- jQuery實現(xiàn)提示密碼強(qiáng)度的代碼
- PHP結(jié)合jQuery實現(xiàn)找回密碼
- jQuery隨機(jī)密碼生成的方法
- jQuery插件passwordStrength密碼強(qiáng)度指標(biāo)詳解
- jQuery簡單實現(xiàn)MD5加密的方法
相關(guān)文章
jquery事件機(jī)制擴(kuò)展插件 jquery鼠標(biāo)右鍵事件。
因為最近技術(shù)長進(jìn)緩慢,也沒高手帶,只能靠自己了,所以想仿個WEBQQ來鍛煉下自己。做之前最好先把必要的東西準(zhǔn)備好2011-12-12Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法
這篇文章主要介紹了Bootstrap table中toolbar新增條件查詢及refresh參數(shù)使用方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-05-058款非常棒的響應(yīng)式j(luò)Query 幻燈片插件推薦
這篇文章收集了8款優(yōu)秀的響應(yīng)式 jQuery 幻燈片插件,它們能夠非常容易的集成到 Web 項目中。響應(yīng)式(Responsive)設(shè)計的目標(biāo)是要讓產(chǎn)品界面能夠響應(yīng)用戶的行為,根據(jù)不同終端設(shè)備自動調(diào)整尺寸,帶給用戶良好的使用體驗2012-02-02jquery ajax異步提交表單數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了jquery ajax異步提交表單數(shù)據(jù)的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-10-10jQuery+CSS 實現(xiàn)隨滾動條增減的汽水瓶中的液體效果
一個很有意思的網(wǎng)站,那個網(wǎng)站是一家德國汽水公司的網(wǎng)站(德文神馬的),網(wǎng)站首頁有一個汽水瓶,汽水瓶里的水會隨著我們向下拉滾動條而減少。2011-09-09關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法
這篇文章主要介紹了關(guān)于jQuery EasyUI 中刷新Tab選項卡后一個頁面變形的解決方法,需要的朋友可以參考下2017-03-03JavaScript前端頁面搜索功能案例【基于jQuery】
這篇文章主要介紹了JavaScript前端頁面搜索功能案例,結(jié)合完整實例形式詳細(xì)分析了基于jQuery實現(xiàn)的前端頁面表格搜索功能相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-07-07