前端-chosen的使用

在偶然的一次机会中，遇到了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,简单使用就介绍完了

猜你喜欢