chosen.jquery插件的使用

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

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

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

jquery        //毋庸置疑jquery必须

chosen.jquery.min.js   //压缩版的chosen核心jquery代码

chosen.css             //chosen 的样式文件

2.chosen的配置js代码

 $(function () {

 　　var config = {

 　　　　'.chosen-select' : {},

 　　　　'.chosen-select-deselect' : {allow_single_deselect:true},

 　　　　'.chosen-select-no-single' : {disable_search_threshold:10},

 　　　　'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},

 　　　　'.chosen-select-width' : {width:"95%"}}

 　　　　for (var selector in config) {

         　　$(selector).chosen(config[selector]);

 　　　　}

 });

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");

巴特西

chosen.jquery插件的使用

最新文章

热门文章