大型项目技术栈第七讲 Chosen的使用
Chosen的使用
Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。chosen插件使用起来很容易。有单选和多选,而且能监听事件及渲染。
css文件:
<link rel="stylesheet" href="../chosen/chosen.min.css" />
js文件:
<script src="../chosen/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="../chosen/chosen.jquery.min.js" type="text/javascript"></script>
完整示例
<!DOCTYPE html>
<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.3</span>)</small></h1>
</header>
<h2><a name="standard-select" class="anchor" href="#standard-select">单选下拉框</a></h2>
<div class="side-by-side clearfix">
<div>
<em>Into This</em>
<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">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
</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 |
多选框是否在下拉列表中显示已经选中的项 |
3、select组件属性
组件关键属性就4个如下:
data-placeholder:空白点位符,显示默认值 multiple:多选择框属性,如
<select data-placeholder="Choose a Country..." multiple class="my-chosen-select">...</select>
selected:标识选项“选中与否” disabled:禁止选中
4、触发事件
Chosen 会在源 <select>
元素上触发事件。
//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 监听的事件
通过在 <select>
元素上触发特定事件可以调用 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('<option value=""></option><option value="United States">覆盖。新选项</option>');
//更新组件数据
('.my-chosen-select').trigger("chosen:updated");
2.追加选项
//追加
('.my-chosen-select').append('<option value=""></option><option value="United States">888</option>');
//更新组件数据
('.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 = '<option value=""></option>';
for(var i = 0;i < opitions.length;i++){
var opition = opitions[i];
optionHtml += '<option value="' + opition["value"] + '" >' + opition["label"] + '</option>';
}
('.my-chosen-select').html(optionHtml);
('.my-chosen-select').trigger("chosen:updated");
}
获得选中的数据语法如下:
$(".my-chosen-select option:selected") 对于选中的项只能操作selected属性
7、分组显示
要使用分组显示,在html中增加optgroup标签。如下:
<select data-placeholder="Choose a Country..." class="my-chosen-select">
<option value=""></option>
<optgroup label="浙江">
<option value="1">杭州</option>
<option value="2">宁波</option>
</optgroup>
<optgroup label="江苏">
<option value="3">苏州</option>
<option value="4">扬州</option>
</optgroup>
<option value="5">上海</option>
</select>
完整示例:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>测试下载选择框</title>
<!--这个不是关键css文件,只是为了样式好看,使用chosen可不引入-->
<link rel="stylesheet" href="docsupport/style.css">
<!--需要引入的css-->
<link rel="stylesheet" href="chosen.min.css">
</head>
<body>
<form>
<div id="container">
<div id="content">
<header>
<h1>Chosen <small>(<span id="latest-version">v1.8.3</span>)</small></h1>
</header>
<h2><a name="standard-select" class="anchor" href="#standard-select">单选下拉框</a></h2>
<div class="side-by-side clearfix">
<div>
<em>Into This</em>
<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">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antarctica">Antarctica</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
</select>
</div>
</div>
<input type="button" onclick='updData();' value="更新数据"/>
</div>
</form>
<script src="docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="chosen.jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//初始化
$(".my-chosen-select").chosen({disable_search:false, search_contains:true, no_results_text:'暂时您查找的项目'});
//事件
$('.my-chosen-select').on('change', function(evt, params) {
console.log("改变选择事件." + "选中值:" + $(".my-chosen-select option:selected").text());
});
$('.my-chosen-select').on('chosen:ready', function(evt, params) {
console.log("chosen组件完全实例化后事件/好像不起作用");
});
$('.my-chosen-select').on('chosen:maxselected', function(evt, params) {
console.log("组件是多选择框里,达到最大限度选择数量事件");
});
$('.my-chosen-select').on('chosen:showing_dropdown', function(evt, params) {
console.log("打开下拉框事件");
});
$('.my-chosen-select').on('chosen:hiding_dropdown', function(evt, params) {
console.log("收起下拉框事件");
});
$('.my-chosen-select').on('chosen:no_results', function(evt, params) {
console.log("没有查找到匹配结果事件");
});
//我们也可以主触发事件
var opitions = new Array({"value":1, label:"浙江"},{"value":2, label:"上海"},{"value":3, label:"江苏"},{"value":4, label:"北京"},{"value":5, label:"河北"},);
var optionHtml = '<option value=""></option>';
for(var i = 0;i < opitions.length;i++){
var opition = opitions[i];
optionHtml += '<option value="' + opition["value"] + '" >' + opition["label"] + '</option>';
}
$('.my-chosen-select').html(optionHtml);
$('.my-chosen-select').trigger("chosen:updated");
function updData(){
//覆盖
$('.my-chosen-select').html('<option value=""></option><option value="United States">666</option>');
//追加
$('.my-chosen-select').append('<option value=""></option><option value="United States">888</option>');
//更新组件数据
$('.my-chosen-select').trigger("chosen:updated");
}
</script>
</body>
</html>
总结:
1.引入下面的1个css和2个js文件 2.正确使用配置初始化select组件 3.选项的修改只能通过拼装html方式,不提供操作单独数据源更新选项的操作。 4.丰富的事件。每次修改选项都必要触发$(’.my-chosen-select’).trigger(“chosen:updated”);事件。
- 解码针对工业工程领域的网络攻击 Operation Ghoul「食尸鬼行动」
- EndpointAddress——不只是一个Uri[上篇]
- EndpointAddress——不只是一个Uri[下篇]
- ASP.NET Core中如影随形的”依赖注入”[上]: 从两个不同的ServiceProvider说起
- ASP.NET Core中如影随形的”依赖注入”[下]: 历数依赖注入的N种玩法
- ASP.NET Core中的缓存[1]:如何在一个ASP.NET Core应用中使用缓存
- ASP.NET Core的路由[5]:内联路由约束的检验
- .NET Core跨平台的奥秘[下篇]:全新的布局
- Equation Group泄露文件分析
- ModelBinder——ASP.NET MVC Model绑定的核心
- 一句代码实现批量数据绑定[下篇]
- 三种属性操作性能比较:PropertyInfo + Expression Tree + Delegate.CreateDelegate
- 解密Myspace密码的姿势
- weblogic安全配置二三事
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 以太坊交易签名解析源码解读
- 比较NaN和数字
- GO 的方法集
- 轻松应对并发问题,简易的火车票售票系统,第一步 —业务分析
- 【Spark Operator】核数设置Cores/Cores Limit/Cores Request,你搞清楚没有?
- 【Ceph RGW】radosgw_usage_exporter监控用户使用量
- 【Goland】#{key}=#{value},字符串被格式化了?
- Variable变量
- 案例:OGG目标端进程ABENDED处理
- Elasticsearch深分页以及排序查询问题
- 聊聊dubbo-go的HystrixFilter
- 如何将Java工程导出成可以执行的jar
- 利用JSP内置的Application对象实现的网站引用计数
- JSP导入XML不成功的一个原因
- 生产环境日志清理脚本