jquery chosen插件使用及select常用方法

1、chosen插件使用

chosen插件依赖于jQuery库或prototype，使用之前要先引入jQuery或prototype。

引入jquery插件和chosen插件，对需要美化的下拉框执行chosen函数：$(selector).chosen(options)。可以把selector写成样式类，这样执行完chosen函数后，只要加上样式类就可以了。

举例

属性：

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

监听事件：

选项	描述
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	搜索没有匹配项时触发

$('.chosen').on('change', function(e, params) {
  do_something(e, params);
});

Chosen 触发的事件:

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

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

//我在项目中用的是
$('.chosen').trigger('liszt:updated');

常用操作：
1.1、设置chosen下拉框中的选项内容

/*设置下拉框选项内容*/
$(selectId).html(change_options);
//需要执行trigger方法，才会生效
$(selectId).trigger("liszt:updated");

1.2、设置chosen选中某项

//设置选中第几项
$(selectId).get(0).selectedIndex=i;
//需要执行trigger方法，才会生效
$(selectId).trigger("liszt:updated");

//需要执行change()方法，才会触发onChange事件
$(selectId).change();

2、select使用操作

2.1、设置select内容

清空select：
$("#ddlregtype").empty();
设置select选项
$("#ddlregtype").html();

2.2、获取select相关内容

获取select选中的 value:
$("#ddlregtype").val();
获取select 选中的 text :
$("#ddlregtype").find("option:selected").text();
获取select选中的索引:
$("#ddlregtype").get(0).selectedIndex;

2.3、设置select选中某一项

根据value值

//根据value值
$("#select1 option[value='4']").attr("selected","selected");
$("#select1 option[value='4']").attr("selected",true);
$("#select1").val("4");
$("#select1").get(0).value = '3';

根据索引值

//根据索引值
$("#select1 ").get(0).selectedIndex=index;//index为索引值（从0开始）
$("#select1").get(0).options[i].selected = true; //i为索引值(从0开始)

根据text值

//根据text值
$('#test option[text="b"]').attr("selected",true);  
$('#test').find('option[text="b"]').attr("selected",true);

但是以上两种方法在jquery低于1.4.2的版本（含）中有效，在更高版本中无效！

【高版本Jquery中解决办法：】
解决一：精确匹配，选择文本与所给字符串完全一样的option。

$('#select1 option').filter(function(){return $(this).text()=="亲友";}).attr("selected",true);

解决二：子串匹配，选择文本包含所给字符串的option。

$("#select1 option:contains('其他')").attr('selected', true);

解决三：自定义函数

$("#btn").click(function(){  
    var count=$("#select1").get(0).options.length;  
    for(var i=0;i


2.4、操作select option选项
$("#select_id").append("");  //添加一项option
$("#select_id").prepend(""); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index='0']").remove();//删除索引值为0的option
$("#select_id option[value='3']").remove(); //删除值为3的option
$("#select_id option[text='4']").remove(); //删除text值为4的option