博客

<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>

初始化参数：

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

初始化参数

触发事件：

Chosen 会在源

<select>

元素上触发事件。

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

监听的事件：

通过在

<select>

元素上触发特定事件可以调用 Chosen 的监听函数。

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

相关的方法：

// 多选 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);
					});
	            });
        	}
        }