Jquery Chosen 下拉框美化插件

 

插件地址：https://github.com/harvesthq/chosen/

Demo地址：http://www.aitiblog.com/test/chosen/

 

使用时，需要先引入jquery，然后再引入chose的js和css 

 

<script type="text/javascript" src="@{'/public/js/chosen/chose.jquery.js'}"></script>
<link rel='stylesheet' href='@{'/public/js/chosen/chosen.css'}' type='text/css' media='all'/>

 

在select的class属性添加chzn-select，定义select的width属性

 

    <option value="">Demo</option>

 

然后在select元素上启用chose

 

jQuery("#obj_branch_id").chosen();

 

如果select中的选项发生变化，例如通过ajax更新了option，可以在ajax的回调函数中更新chose

 

jQuery("#obj_branch_id").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>

 

动态的设置值：

 

 <option>Brown Bear</option>
 <option selected="">Giant Panda</option>
 <option>Sloth Bear</option>

 

给需要设置值的标签假如 selected="" 属性 

 

 遍历并获取选中项的Value值：

$("#pingcezhuti option:selected").each(function () {
                alert($(this).val());
            });