大型项目技术栈第七讲 Chosen的使用
Chosen的使用
Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。chosen插件使用起来很容易。有单选和多选，而且能监听事件及渲染。
官方文件 可以将源码下载下来研究，其中index.html是首页效果，options.html里是配置说明。
1、示例
css文件：
js文件：
完整示例
<html>
<head>
<meta charset="utf-8">
<title>title>
<link rel="stylesheet" href="../chosen/chosen.min.css" />
head>
<body>
<form>
<div id="container">
<div id="content">
<header>
<h1>Chosen <small>(<span id="latest-version">v1.8.3span>)small>h1>
header>
<h2><a name="standard-select" class="anchor" href="#standard-select">单选下拉框a>h2>
<div class="side-by-side clearfix">
<div>
<em>Into Thisem>
<select data-placeholder="Choose a Country..." multiple class="my-chosen-select">
<option value="">option>
<option value="United States" selected>选中option>
<option value="United Kingdom" disabled>禁止选中option>
<option value="Afghanistan">Afghanistanoption>
<option value="Aland Islands">Aland Islandsoption>
<option value="Albania">Albaniaoption>
<option value="Algeria">Algeriaoption>
<option value="American Samoa">American Samoaoption>
<option value="Andorra">Andorraoption>
<option value="Angola">Angolaoption>
<option value="Anguilla">Anguillaoption>
<option value="Antarctica">Antarcticaoption>
<option value="Antigua and Barbuda">Antigua and Barbudaoption>
select>
div>
div>
<input type="button" value="更新数据" />
div>
form>
<script src="../chosen/jquery-2.1.1.min.js" type="text/javascript">script>
<script src="../chosen/chosen.jquery.min.js" type="text/javascript">script>
<script>
//初始化
$(".my-chosen-select").chosen({
disable_search:false, search_contains:true, no_results_text:'暂时无您查找的项目'});
script>
body>
html>
select是chosen插件使用的组件，插件会对其它渲染。属性class可以随便起，属性data-placeholder是点位符。
脚本文件里：$(".my-chosen-select").chosen({disable_search:false, search_contains:true});是使用配置文件对下拉框初始化
2、初始化方法chosen配置
| 选项 | 默认值 | 描述 |
|---|---|---|
| allow_single_deselect | false | 设置为 true 时非必选的单选框会显示清除选中项图标 |
| disable_search | false | 设置为 true 隐藏单选框的搜索框 |
| disable_search_threshold | 0 | 少于 n 项时隐藏搜索框 |
| enable_split_word_search | true | 是否开启分词搜索，默认开启 |
| inherit_select_classes | false | 是否继承 select 元素的 class，如果设为 true，Chosen 将把 select 的 class 添加到容器上 |
| max_selected_options | Infinity | 最多选择项数，达到最大限制时会触发 chosen:maxselected 事件 |
| no_results_text | “No results match” | 没有搜索到匹配项时显示的文字 |
| placeholder_text_multiple | “Select Some Options” | 多选框没有选中项时显示的占位文字 |
| placeholder_text_single | “Select an Option” | 单选框没有选中项时显示的占位文字 |
| search_contains | false | 搜素包含项，默认从第一个字符开始匹配 |
| single_backstroke_delete | true | 多选框中使用退格键删除选中项目，如果设为 false，第一次按 delete/backspace 会高亮最好一个选中项目，再按会删除该项 |
| width | Original select width. | Chosen 生成的选择框宽度，默认为和原 select 宽度保持一致 |
| display_disabled_options | true | 是否显示禁止选择的项目 |
| display_selected_options | true | 多选框是否在下拉列表中显示已经选中的项 |
更多选项可从下载的源码options.html下找。
3、select组件属性
组件关键属性就4个如下：
data-placeholder：空白点位符，显示默认值
multiple：多选择框属性，如
selected:标识选项“选中与否”
disabled：禁止选中
4、触发事件
Chosen 会在源 元素上触发事件。
//change事件
$(".my-chosen-select").on("change",function(e,params){
console.log(e);//事件对象
console.log(this);//当前元素
console.log(params);//当前被选中的哪个元素的值
console.log($(".my-chosen-select option:selected")) //获取所有被选中元素
})
| 事件 | 描述 |
|---|---|
| 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 自定义事件 都包含 Chosen 实例 chosen 对象作为参数
5、Chosen 监听的事件
通过在 元素上触发特定事件可以调用 Chosen 的监听函数。
// tell Chosen that a select has changed
$('.my_select_box').trigger('chosen:updated');
| 事件 | 描述 |
|---|---|
| chosen:updated | 通过 JS 改变 select 元素选项时应该触发此事件，以更新 Chosen 生成的选框 |
| chosen:activate | 相当于 HTML focus 事件 |
| chosen:open | 激活 Chosen 并显示搜索结果 |
| chosen:close | 关闭 Chosen 并隐藏搜索结果 |
6、取值，初始化选中项，数据渲染
上面介绍了chosen所以的配置，属性，事件，有没有发现问题，chosen渲染不是单独提供数据源，然后根据数据源渲染下拉框的，所以，动态改变下拉框数据只能使用html方式。如下：
1.覆盖整个下拉框
('.my-chosen-select').html('');
//更新组件数据
('.my-chosen-select').trigger("chosen:updated");
2.追加选项
//追加
('.my-chosen-select').append('');
//更新组件数据
('.my-chosen-select').trigger("chosen:updated");
所以想动态初始化数据只能如下方法：
//动态初始化数据
function initData(){
var opitions = new Array({"value":1, label:"浙江"},{"value":2, label:"上海"},{"value":3, label:"江苏"},{"value":4, label:"北京"},{"value":5, label:"河北"},);
var optionHtml = '';
for(var i = 0;i < opitions.length;i++){
var opition = opitions[i];
optionHtml += '';
}
('.my-chosen-select').html(optionHtml);
('.my-chosen-select').trigger("chosen:updated");
}
获得选中的数据语法如下：
$(".my-chosen-select option:selected")
对于选中的项只能操作selected属性
7、分组显示
要使用分组显示，在html中增加optgroup标签。如下：
完整示例：
测试下载选择框