Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。chosen插件使用起来很容易。有单选和多选,而且能监听事件及渲染。
官方文件 可以将源码下载下来研究,其中index.html是首页效果,options.html里是配置说明。
css文件:
chosen.min.css
js文件:
<script src="docsupport/jquery-3.2.1.min.js" type="text/javascript">script>
<script src="chosen.jquery.js" type="text/javascript">script>
css文件和js文件可以从下载的源码里找到。
使用chosen插件只需要引入这几个关键库文件即可。
<html lang="en">
<head>
<meta charset="utf-8">
<title>测试下载选择框title>
<link rel="stylesheet" href="docsupport/style.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.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..." class="my-chosen-select">
<option value="">option>
<option value="United States">United Statesoption>
<option value="United Kingdom">United Kingdomoption>
<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>
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});
script>
body>
html>
解释:
select是chosen插件使用的组件,插件会对其它渲染。属性class可以随便起,属性data-placeholder是点位符。
脚本文件里:$(".my-chosen-select").chosen({disable_search:false, search_contains:true});
是使用配置文件对下拉框初始化,chosen方法我们常用到,disable_search:false, search_contains:true这几个属性下面会解决.
一个简单的例子就这样出来了,是不是很容易,当然,数据是写死的,对程序开发来说这是不科学的。其中还涉及到一些其它配置以及事件,数据动态添加。
上面写的2个配置我觉得大部分情况下够用了,当然还有其它配置。如下:
更多选项可从下载的源码options.html下找。
使用语法如下:
$(".my-chosen-select").chosen({disable_search:false, search_contains:true, no_results_text:'暂时您查找的项目'});
组件关键属性就4个如下:
语法如下:
一个样式,左右颠倒文字和下拉框图片位置
语法如下:
<select data-placeholder="Choose a Country..." class="my-chosen-select chosen-rtl">
chosen有很丰富的事件,同时我们也可以主动触发组件事件。
事件:
//事件
$('.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("没有查找到匹配结果事件");
});
触发事件,通过在 元素上触发特定事件可以调用 Chosen 的监听函数:
上面介绍了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">888option>');
//更新组件数据
$('.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 += '] + '" >' + opition["label"] + '';
}
$('.my-chosen-select').html(optionHtml);
$('.my-chosen-select').trigger("chosen:updated");
}
获得选中的数据语法如下:
$(".my-chosen-select option:selected")
对于选中的项只能操作selected属性
要使用分组显示,在html中增加optgroup
标签。如下:
使用multiple
属性即可将单选变成多选荐。如下:
整个chosen学习完毕,
1.引入下面的1个css和2个js文件
2.正确使用配置初始化select组件
3.选项的修改只能通过拼装html方式,不提供操作单独数据源更新选项的操作。
4.丰富的事件。每次修改选项都必要触发$('.my-chosen-select').trigger("chosen:updated");
事件。
完成html源码如下:
<html lang="en">
<head>
<meta charset="utf-8">
<title>测试下载选择框title>
<link rel="stylesheet" href="docsupport/style.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.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" 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 = '';
for(var i = 0;i < opitions.length;i++){
var opition = opitions[i];
optionHtml += '] + '" >' + opition["label"] + '';
}
$('.my-chosen-select').html(optionHtml);
$('.my-chosen-select').trigger("chosen:updated");
function updData(){
//覆盖
$('.my-chosen-select').html('');
//追加
$('.my-chosen-select').append('');
//更新组件数据
$('.my-chosen-select').trigger("chosen:updated");
}
script>
body>
html>
文件中需要的库文件在源码里