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的美化插件，并且带搜索功能完成。