chosen.jquery插件的使用

前几天在jQuery官网看到了插件里面有400多个插件，看了下效果都很好，以后项目里面难免会用到。于是下了个决定，有时间把官网的插件都研究下，并简单介绍他的用法，方便以后的使用。

下面将要提到的是jQuery的chosen插件，它是对下拉select的封装，高手做出来的东西就是不错。

1.使用chosen插件，有几个文件时必须要引入的

jquery        //毋庸置疑jquery必须
chosen.jquery.min.js   //压缩版的chosen核心jquery代码
chosen.css             //chosen 的样式文件

2.chosen的配置js代码

 1 $(function () {
 2 　　var config = {
 3 　　　　'.chosen-select' : {},
 4 　　　　'.chosen-select-deselect' : {allow_single_deselect:true},
 5 　　　　'.chosen-select-no-single' : {disable_search_threshold:10},
 6 　　　　'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
 7 　　　　'.chosen-select-width' : {width:"95%"}}
 8 　　　　for (var selector in config) {
 9         　　$(selector).chosen(config[selector]);
10 　　　　}
11 });

3.在select中加入相应的class就ok了。比如

<select data-placeholder="Choose a Country..." name="country" class="chosen-select" style="width:350px;" tabindex="1">

data-placeholder=”Choose a Country…”：第一个option留空，则会在select中默认显示的文本—Choose a Country…

class=”chosen-select” ：插件的最主要部分。

效果是：

在select标签中加入multiple就会变成多选

可以根据传过来的值动态选中：

$("#form-field-select-2").trigger("chosen:updated");

来源：http://www.cnblogs.com/redfire/p/7695670.html

标签

chosen

select