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' : {"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="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");