jquery插件chosen和select的简单应用

原文链接：http://www.aitiblog.com/js/jquery/432.html

前几天在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就会变成多选

更多功能请查看chosen样例，下载chosen样例（稍后提供）。