Chosen 是一個(gè)JavaScript插件，它對select選擇框增加主動篩選的功能，可對列表進(jìn)行分組，同時(shí)也可禁用某些選擇項(xiàng)。目前，它支持 jQuery 和 Prototype 兩種JavaScript引擎。
示例：[url]https://harvesthq.github.io/chosen/[/url]。
使用Chosen版本1.6.1。
一、頁面引入Chosen插件庫
<!-- chosen插件 -->
<script type="text/javascript" src="${ctx}/resource/js/chosen/chosen.jquery.js"></script>
<link href="${ctx}/resource/js/chosen/chosen.css" rel="stylesheet" type="text/css" />
二、初始化插件
$('.chosen').chosen({
width: "150px",
search_contains: true,//true-可根據(jù)中間字段模糊查詢
no_results_text: "沒有匹配結(jié)果"
});

<select class="chosen" id="schoolId" name="schoolId"
onchange="checkSchool()" style="width:150px;" data-placeholder="-請選擇學(xué)校-">
<option></option>
</select>

遇到問題：
1、chosen下拉框width為0px，如圖所示：
[img]http://dl.iteye.com/upload/picture/pic/135817/bdbdc0e8-c9cb-30c5-b153-8607abb9210f.png[/img]
解決：$('.chosen').chosen()設(shè)置width，如上面js代碼所示。
也可修改chosen.css文件中樣式添加width 150px !important:
.chosen-container {
position: relative;
display: inline-block;
vertical-align: middle;
font-size: 13px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
width: 150px !important;//解決width未0px問題
}
2、data-placeholder屬性不生效
解決：需添加空選項(xiàng)<option></option>，如上面html代碼所示。
三、動態(tài)更新ajax從后臺傳遞過來數(shù)據(jù),使用trigger("chosen:updated")
function querySchool() {
var county = $("#district").val();
$.ajax({
type:'post',
url:'${ctx}/school/findSchoosJson',
dataType:"json",
data:{"county":county},
success:function(data){
$("#schoolId").empty();
$("#schoolId").append('<option></option>');
$.each(data, function (idx, obj) {
$("#schoolId").append('<option value="' + obj.id + '">' + obj.name + '</option>');
});
$("#schoolId").trigger("chosen:updated");//更新下拉選項(xiàng)
},
error:function(data){
alert("error");
}
});
}

總結(jié)

以上是生活随笔為你收集整理的chosen插件使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。