大型项目技术栈第七讲 Chosen的使用

Chosen的使用

Chosen是jquery下的一个下拉框插件。它能美化select选择框使其他变的更好看、更方便,同时它更扩展筛选的功能。它可对列表进行分组,同时也可禁用某些选择项。chosen插件使用起来很容易。有单选和多选,而且能监听事件及渲染。
官方文件 可以将源码下载下来研究,其中index.html是首页效果,options.html里是配置说明。

1、示例

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 多选框是否在下拉列表中显示已经选中的项

更多选项可从下载的源码options.html下找。

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”);事件。

https://github.com/amazeui/chosen/blob/master/docs/demo.md

上一篇:Jmeter-断言


下一篇:[Angular TypeScript报错]Cannot assign to read only property ‘outwardcolor‘ of object ‘[object Object]‘