chosen下拉框

<link href="../chosen/chosen.css" rel="stylesheet"/>
<script src="../chosen/chosen.jquery.js"/>

属性：

<select class="chosen-select" id="cityId" 
                     data-placeholder="请选择城市，可多选，下级分类继承上级城市" multiple="multiple">
		<option value="1" >北京</option>
		<option value="2" selected>上海</option>
		<option value="3" disabled>深圳</option>
</select>

属性	描述
data-placeholder	占位符文字  注意： 改属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。
multiple	有此属性的 select 会渲染成可以多选的 Chosen 选框
selected, disabled	设置选中、禁止状态，Chosen 会读取这些属性

 

初始化参数：

$('#cityId').chosen({
                width:'100%',
                disable_search_threshold:15 //15个选项以下不显示搜索
            })

初始化参数

选项	默认值	描述
allow_single_deselect	false	设置为 true 时非必选的单选框会显示清除选中项图标
disable_search	false	设置为 true 隐藏单选框的搜索框
disable_search_threshold	0	少于 n 项时隐藏搜索框
enable_split_word_search	true	是否开启分词搜索，默认开启
inherit_select_classes	false	是否继承 select 元素的 class，如果设为 true，Chosen 将把 select 的 class 添加到容器上
max_selected_options	Infinity	最多选择项数，达到最大限制时会触发 chosen:maxselected 事件
no_results_text	"No results match"	没有搜索到匹配项时显示的文字
placeholder_text_multiple	"Select Some Options"	多选框没有选中项时显示的占位文字
placeholder_text_single	"Select an Option"	单选框没有选中项时显示的占位文字
search_contains	false	搜素包含项，默认从第一个字符开始匹配
single_backstroke_delete	true	多选框中使用退格键删除选中项目，如果设为 false，第一次按 delete/backspace 会高亮最好一个选中项目，再按会删除该项
width	Original select width.	Chosen 生成的选择框宽度，默认为和原 select 宽度保持一致
display_disabled_options	true	是否显示禁止选择的项目
display_selected_options	true	多选框是否在下拉列表中显示已经选中的项

 

触发事件：

Chosen 会在源 <select> 元素上触发事件。

$('#cityId').on('change', function(e, params) {
  //todo
});

事件	描述
change	Chosen 触发标准的 change 事件，同时会传递 selected or deselected 参数， 方便用户获取改变的选项
chosen:ready	Chosen 实例化完成时触发
chosen:maxselected	超过 max_selected_options 设置时触发
chosen:showing_dropdown	Chosen 下拉选框打开完成时触发
chosen:hiding_dropdown	Chosen 下拉选框关闭完成时触发
chosen:no_results	搜索没有匹配项时触发

 

监听的事件：

通过在 <select> 元素上触发特定事件可以调用 Chosen 的监听函数。

$('#cityId').trigger('chosen:updated');

事件	描述
chosen:updated	通过 JS 改变 select 元素选项时应该触发此事件，以更新 Chosen 生成的选框
chosen:activate	相当于 HTML focus 事件
chosen:open	激活 Chosen 并显示搜索结果
chosen:close	关闭 Chosen 并隐藏搜索结果

 

相关的方法：

// 多选 select 数据初始化selected和disabled
function chose_mult_set_ini(select, values , dis_values) {
    var arr = values.split(',');
    var dis_arr = dis_values.split(',');
    for (i = 0; i < arr.length; i++) {
        $(select + " option[value='" + arr[i] + "']").attr('selected', 'selected');
    }
    if(dis_values!=""){
    	var options = $(select + " option").attr("disabled","disabled");
    	for (i = 0; i < dis_arr.length; i++) {
        $(select + " option[value='" + dis_arr[i] + "']").removeAttr('disabled');
     }
    }
    $(select).trigger("liszt:updated");
}	

<script language="javascript">
    $(document).ready(function(){
         
        //华丽初始化
        $(".chzn-select").chosen();
 
        //单选select 数据同步
        chose_get_ini('#dl_chose');
        //change 事件
        $('#dl_chose').change(function(){
                alert(chose_get_value('#dl_chose') + ' : '+ chose_get_text('#dl_chose'));
        });
 
        //多选select 数据同步
        chose_get_ini('#dl_chose2');
        //change 事件
        $('#dl_chose2').change(function(){
            alert(chose_get_value('#dl_chose2') + ' : '+ chose_get_text('#dl_chose2'));
        });
         
    });
     
    //select 数据同步
    function chose_get_ini(select){
        $(select).chosen().change(function(){$(select).trigger("liszt:updated");});
    }
    //单选select 数据初始化
    function chose_set_ini(select, value){
        $(select).attr('value',value);
        $(select).trigger("liszt:updated");
    }
    //单选select value获取
    function chose_get_value(select){
        return $(select).val();
    }
    //select text获取，多选时请注意
    function chose_get_text(select){
        return $(select+" option:selected").text();
    }
 
    //多选select 数据初始化
    function chose_mult_set_ini(select, values){
        var arr = values.split(',');
        var length = arr.length;
        var value = '';
        for(i=0;i<length;i++){
            value = arr[i];
            $(select+" [value='"+value+"']").attr('selected','selected');
        }
        $(select).trigger("liszt:updated");
    }
</script>

根据城市ID动态加载商品，这里$("#cityId")也是chosen下拉框，$("#cityId").val()返回的值为数组。

//动态加载下拉
        function chose_changeGoods() {
        	var cityId = $("#cityId").val();
        	if(cityId!='' && cityId!=null){
        		var data = {cityId: cityId.join(',')} ;
	            $.post("../qisbao/changeGoods.action", data,function(data){
	            	$("#goodsId").html("<option value=''>选择商品</option>"+data);
	            	$("#goodsId").chosen("destroy");
		            //商品下拉
					$('#goodsId').chosen({
						width:'100%',
						disable_search_threshold:10, //15个选项以下不显示搜索
						no_results_text:'没有搜索到内容'
					}).change(function(){
						var goodsName = $('#goodsId').find("option:selected").text();
						$("#goodsName").val(goodsName);
					});
	            });
        	}
        }

 

转载于:https://my.oschina.net/xkay/blog/743184