jquery的select下拉框美化插件Chosen 使用

首先引用相关的js和css:

<!--搜索下拉框插件-->
<link href="css/chosen.css" rel="stylesheet" type="text/css" />
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<link href="css/style.css" rel="stylesheet" type="text/css" />

接着在表单下拉选项中select引入样式和设置id

<div data-role="fieldcontain" >
<label for="parentDistributorSelect">分销总店名称:</label>
<select id="parentDistributorSelect" name="distributorId" data-role="none" class="chzn-select">
<option value="-1">--空--</option>
<c:forEach var="distributorInfo" items="${distributorInfoList}">
<option value="${distributorInfo.id}">${distributorInfo.companyName}</option>
</c:forEach>
</select>
</div>

(这里我用的是html5的动态下拉select),确定select的id和引入class

接着我们在script中初始化chosen插件：

//搜索下拉框初始化
$(function () {
$('#parentDistributorSelect').chosen({
width: "85%",
no_results_text:"没有找到",
allow_single_deselect:true
}
);
});

到此select的美化插件，并且带搜索功能完成。

后续有很多开发填坑的文章发布，如果对你有帮助，请支持和加关注一下

http://e22a.com/h.05ApkG?cv=AAKHZXVo&sm=339944

https://shop119727980.taobao.com/?spm=0.0.0.0