Jquery chosen動(dòng)態(tài)設(shè)置值實(shí)例介紹
更新時(shí)間：2013年08月08日 15:50:55 作者：
Jquery chosen一款選擇插件，支持檢索，多選，但不支持輸入效果，下面與大家分享下其使用示例，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
Jquery chosen 地址：https://github.com/harvesthq/chosen
一款選擇插件，支持檢索，多選，但不支持輸入效果如下圖
確定是用的這個(gè)哦， 不然可往下看也沒有什么意義了
突然發(fā)現(xiàn)如果用在省市選擇發(fā)現(xiàn)有如下問題：
1，不能動(dòng)態(tài)設(shè)置值
2，不能動(dòng)態(tài)設(shè)置選中
看了好幾遍API愣是米有發(fā)現(xiàn)有方法可以直接調(diào)用。沒辦法就看源碼，發(fā)現(xiàn)在其初始化的時(shí)候有一個(gè)判斷如下圖：
發(fā)現(xiàn)有個(gè)destroy是不是("#city).chosen("destroy");就可以了呢。把猜想試了一下果然可以。在這之前調(diào)試過其生成的dom想通過直接將其生成的dom移除掉，結(jié)果是不可行的，能移除掉，但是就再也無法初始化了。浪費(fèi)了二三個(gè)小時(shí)哇。
首先解決第一個(gè)問題
<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#province").change(function(){
$("#city").html("");
$("#city").chosen("destroy");
$("<option value='-1'>-全部-</option>").appendTo("#city");
$.getJSON("${ctx}/api/getCityByProvinceJson.jsp",{
province:$("#province").val()
},function(data){
$.each(data,function(i){
$("<option value='"+data[i].city+"'>"+data[i].city+"</option>").appendTo("#city");
});
$("#city").attr("multiple",true);
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
});
});
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
這樣便可動(dòng)態(tài)設(shè)置值了，感覺代碼有點(diǎn)重復(fù)，但是目前還沒有找到比較好的方法
下面解決第二個(gè)問題
用法跟上面相似，先給select設(shè)置值再用初始化下拉框，代碼如下：
<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#city").val("上海");
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
這樣便可以動(dòng)態(tài)設(shè)置選中了
一款選擇插件，支持檢索，多選，但不支持輸入效果如下圖
確定是用的這個(gè)哦， 不然可往下看也沒有什么意義了
突然發(fā)現(xiàn)如果用在省市選擇發(fā)現(xiàn)有如下問題：
1，不能動(dòng)態(tài)設(shè)置值
2，不能動(dòng)態(tài)設(shè)置選中
看了好幾遍API愣是米有發(fā)現(xiàn)有方法可以直接調(diào)用。沒辦法就看源碼，發(fā)現(xiàn)在其初始化的時(shí)候有一個(gè)判斷如下圖：
發(fā)現(xiàn)有個(gè)destroy是不是("#city).chosen("destroy");就可以了呢。把猜想試了一下果然可以。在這之前調(diào)試過其生成的dom想通過直接將其生成的dom移除掉，結(jié)果是不可行的，能移除掉，但是就再也無法初始化了。浪費(fèi)了二三個(gè)小時(shí)哇。
首先解決第一個(gè)問題
復(fù)制代碼 代碼如下:
<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#province").change(function(){
$("#city").html("");
$("#city").chosen("destroy");
$("<option value='-1'>-全部-</option>").appendTo("#city");
$.getJSON("${ctx}/api/getCityByProvinceJson.jsp",{
province:$("#province").val()
},function(data){
$.each(data,function(i){
$("<option value='"+data[i].city+"'>"+data[i].city+"</option>").appendTo("#city");
});
$("#city").attr("multiple",true);
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
});
});
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
這樣便可動(dòng)態(tài)設(shè)置值了，感覺代碼有點(diǎn)重復(fù)，但是目前還沒有找到比較好的方法
下面解決第二個(gè)問題
用法跟上面相似，先給select設(shè)置值再用初始化下拉框，代碼如下：
復(fù)制代碼 代碼如下:
<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#city").val("上海");
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
這樣便可以動(dòng)態(tài)設(shè)置選中了
相關(guān)文章
教你用jquery實(shí)現(xiàn)iframe自適應(yīng)高度
iframe因?yàn)槟芎途W(wǎng)頁無縫的結(jié)合從而不刷新頁面的情況下更新頁面的部分?jǐn)?shù)據(jù)成為可能，可是 iframe的大小卻不像層那樣可以“伸縮自如”，所以帶來了使用上的麻煩，給iframe設(shè)置高度的時(shí)候多了也不好，少了更是不行，今天我們就來分享2種使用jquery實(shí)現(xiàn)iframe自適應(yīng)高度的代碼2014-06-06
JQuery 設(shè)置checkbox值二次無效的解決方法
下面小編就為大家?guī)硪黄狫Query 設(shè)置checkbox值二次無效的解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
基于jquery插件編寫countdown計(jì)時(shí)器
這篇文章主要為大家詳細(xì)介紹了jquery插件編寫countdown計(jì)時(shí)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
本文主要給大家詳細(xì)介紹了jQuery過濾選擇器，包含基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對(duì)象屬性過濾選擇器等，十分全面,需要的朋友可以參考下2015-01-01
jQuery遍歷DOM元素與節(jié)點(diǎn)方法詳解
這篇文章主要介紹了jQuery遍歷DOM元素與節(jié)點(diǎn)方法,結(jié)合實(shí)例形似詳細(xì)分析了jQuery遍歷DOM父級(jí)節(jié)點(diǎn),子級(jí)節(jié)點(diǎn)及兄弟節(jié)點(diǎn)的相關(guān)技巧,需要的朋友可以參考下2016-04-04
讀jQuery之七 判斷點(diǎn)擊了鼠標(biāo)哪個(gè)鍵的代碼
jQuery中的which即可以是鍵盤的鍵值，也可以是鼠標(biāo)的鍵值。2011-06-06
這篇文章主要為大家詳細(xì)介紹了jquery廣告無縫輪播實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-01-01
etmvc+jQuery EasyUI+combobox多值操作實(shí)現(xiàn)角色授權(quán)實(shí)例
本篇文章主要介紹了etmvc+jQuery EasyUI+combobox多值操作實(shí)現(xiàn)角色授權(quán)，實(shí)現(xiàn)對(duì)角色role進(jìn)行授權(quán)操作，有需要的可以了解一下。2016-11-11
修改好的jquery滾動(dòng)字幕效果實(shí)現(xiàn)代碼
修改好的jquery滾動(dòng)字幕效果，需要的朋友可以參考下。2011-06-06
jQuery validate 中文API 附validate.js中文api手冊(cè)
jQuery validate 中文API 附validate.js中文api手冊(cè)2010-07-07