在偶然的一次机会中,遇到了chosen,使用场景很简单,就是我们select多选的样式太难看了,在多选时,需要占用比较大的空间,已经长相不忍直视,然后chosen就是去韩国整容后的select,使用简单,样式多样。下面介绍一样其简单的使用方法,如有更好的建议,请留下您宝贵的建议。
下载链接:https://harvesthq.github.io/chosen/ ,不仅方便下载,使用也很详细。
在头部引入css样式:
<head> <link rel="stylesheet" href="js/chosen_v1.8.7/chosen.css"> </head>
接下来,在select加上class
<select data-placeholder="请选择所属范围" multiple class="chosen-select1" tabindex="10" name="containMonth" > <option value="1">一月</option> <option value="2">二月</option> <option value="3">三月</option> <option value="4">四月</option> <option value="5">五月</option> </select>
最后是js:
<script src="${base}/js/chosen_v1.8.7/chosen.jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> <script type="text/javascript"> $(function () { //初始化select initChosen(".chosen-select1", "${bean.containMonth}","${disSelected.months}"); }) /** * 初始化select * @param select : id 或者 class * @param values : 字符串, 逗号分隔 */ function initChosen(select, values,disvalues) { showSelected(select, values); disSelected(select, disvalues) // 如果要初始化已选中的项,需要在调用chosen()函数之前调用chose_mult_set_ini()函数 // 设置<select>的<option>属性selected='selected',这样chosen()函数被调用时,相应项会显示在框中 $(select).chosen({ width: '100%' }); } /** * 显示被选中的 * @param select * @param values */ function showSelected(select, showValues) { if(showValues == null){ return ; } var arr = showValues.split(','); var length = arr.length; var value = ''; for (i = 0; i < length; i++) { value = arr[i]; $(select + " option[value='" + value + "']").attr('selected', 'selected'); } $(select).trigger("liszt:updated"); } /** * 设置不可被选中的 * @param select * @param values */ function disSelected(select, values) { if(values == null){ return ; } var arr = values.split(','); var length = arr.length; var value = ''; for (i = 0; i < length; i++) { value = arr[i]; if(value != ''){ $(select + " option[value=" + value + "]").attr('disabled', 'disabled'); } } $(select).trigger("liszt:updated"); } function setEleNumData(id) { $.get("${base}/electricalUnit/findUserEleNum.dhtml?parentId="+id,function (json) { if (json.status == 'success') { var obj = document.getElementById("eleNum"); for(var eleNum of json.data){ // obj.add(new Option(e.city, e.city, true, true)); 这个默认选中 obj.add(new Option(eleNum.eleNum, eleNum.eleNum)); } $("#eleNum").trigger("chosen:updated"); $("#eleNum").chosen(); } }) } </script>
ok,简单使用就介绍完了
前端-chosen的使用
猜你喜欢
转载自blog.csdn.net/phn555/article/details/84260457
今日推荐
周排行