Jquery chosen動態(tài)設(shè)置值實(shí)例介紹
更新時間:2013年08月08日 15:50:55 作者:
Jquery chosen一款選擇插件,支持檢索,多選,但不支持輸入效果,下面與大家分享下其使用示例,感興趣的朋友可以參考下,希望對大家有所幫助
Jquery chosen 地址:https://github.com/harvesthq/chosen
一款選擇插件,支持檢索,多選,但不支持輸入效果如下圖
確定是用的這個哦, 不然可往下看也沒有什么意義了
突然發(fā)現(xiàn)如果用在省市選擇發(fā)現(xiàn)有如下問題:
1,不能動態(tài)設(shè)置值
2,不能動態(tài)設(shè)置選中
看了好幾遍API愣是米有發(fā)現(xiàn)有方法可以直接調(diào)用。沒辦法就看源碼,發(fā)現(xiàn)在其初始化的時候有一個判斷如下圖:
發(fā)現(xiàn)有個destroy是不是("#city).chosen("destroy");就可以了呢。把猜想試了一下果然可以。在這之前調(diào)試過其生成的dom想通過直接將其生成的dom移除掉,結(jié)果是不可行的,能移除掉,但是就再也無法初始化了。浪費(fèi)了二三個小時哇。
首先解決第一個問題
<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%"
});
這樣便可動態(tài)設(shè)置值了,感覺代碼有點(diǎn)重復(fù),但是目前還沒有找到比較好的方法
下面解決第二個問題
用法跟上面相似,先給select設(shè)置值再用初始化下拉框,代碼如下:
<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#city").val("上海");
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
這樣便可以動態(tài)設(shè)置選中了
一款選擇插件,支持檢索,多選,但不支持輸入效果如下圖

確定是用的這個哦, 不然可往下看也沒有什么意義了
突然發(fā)現(xiàn)如果用在省市選擇發(fā)現(xiàn)有如下問題:
1,不能動態(tài)設(shè)置值
2,不能動態(tài)設(shè)置選中
看了好幾遍API愣是米有發(fā)現(xiàn)有方法可以直接調(diào)用。沒辦法就看源碼,發(fā)現(xiàn)在其初始化的時候有一個判斷如下圖:

發(fā)現(xiàn)有個destroy是不是("#city).chosen("destroy");就可以了呢。把猜想試了一下果然可以。在這之前調(diào)試過其生成的dom想通過直接將其生成的dom移除掉,結(jié)果是不可行的,能移除掉,但是就再也無法初始化了。浪費(fèi)了二三個小時哇。
首先解決第一個問題
復(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%"
});
這樣便可動態(tài)設(shè)置值了,感覺代碼有點(diǎn)重復(fù),但是目前還沒有找到比較好的方法
下面解決第二個問題
用法跟上面相似,先給select設(shè)置值再用初始化下拉框,代碼如下:
復(fù)制代碼 代碼如下:
<SPAN style="WHITE-SPACE: pre"> </SPAN>$("#city").val("上海");
$("#city").chosen({
no_results_text : "未找到此選項(xiàng)!",
width:"70%"
});
這樣便可以動態(tài)設(shè)置選中了
相關(guān)文章
基于jQuery Easyui實(shí)現(xiàn)登陸框界面
本文通過實(shí)例代碼給大家分享了基于jQuery Easyui實(shí)現(xiàn)登陸框界面,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的的朋友參考下吧2017-07-07jQuery實(shí)現(xiàn)左右兩個列表框的內(nèi)容相互移動功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)左右兩個列表框的內(nèi)容相互移動功能,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01深入理解jquery的$.extend()、$.fn和$.fn.extend()
下面小編就為大家?guī)硪黄钊肜斫鈐query的$.extend()、$.fn和$.fn.extend()。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07簡單實(shí)現(xiàn)兼容各大瀏覽器的js復(fù)制內(nèi)容到剪切板
相信這個功能大家平時上網(wǎng)經(jīng)常能碰到,去看了幾個常用的網(wǎng)站,都是用的透明flash遮擋“復(fù)制到剪貼板”按鈕,所以當(dāng)你點(diǎn)擊按鈕的時候,點(diǎn)擊的其實(shí)是flash,然后把你需要復(fù)制的內(nèi)容傳入到了flash,最后通過flash的復(fù)制功能把傳入的內(nèi)容復(fù)制到了剪貼板。2015-09-09