示例: https://harvesthq.github.io/chosen/。
使用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-可根据中间字段模糊查询 no_results_text: "没有匹配结果" });
<select class="chosen" id="schoolId" name="schoolId" onchange="checkSchool()" style="width:150px;" data-placeholder="-请选择学校-"> <option></option> </select>
遇到问题:
1、chosen下拉框width为0px,如图所示:
解决:$('.chosen').chosen()设置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属性不生效
解决:需添加空选项<option></option>,如上面html代码所示。
三、动态更新ajax从后台传递过来数据,使用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");//更新下拉选项 }, error:function(data){ alert("error"); } }); }