jquery-chosen选择框插件零基础学习

最新推荐文章于 2024-07-21 02:54:33 发布
最新推荐文章于 2024-07-21 02:54:33 发布
阅读量1w 收藏 26
点赞数 9
分类专栏： 技术工具 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/achenyuan/article/details/79712901
版权

jquery-chosen 选择框插件

第一、前言

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插件只需要引入这几个关键库文件即可。

第三、一个简单的例子。

<!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..." class="my-chosen-select">
            <option value=""></option>
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</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>

  </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这几个属性下面会解决.

一个简单的例子就这样出来了，是不是很容易，当然,数据是写死的，对程序开发来说这是不科学的。其中还涉及到一些其它配置以及事件，数据动态添加。

第四、初始化方法chosen配置

上面写的2个配置我觉得大部分情况下够用了，当然还有其它配置。如下：

  1. allow_single_deselect：默认值false，设置为 true 时非必选的单选框会显示清除选中项图标
  2. disable_search ：默认值false，设置为 true 隐藏单选框的搜索框
  3. disable_search_threshold ：默认值0，少于 n 项时隐藏搜索框
  4. enable_split_word_search ：默认值true ，是否开启分词搜索，默认开启
  5. inherit_select_classes：默认值false，是否继承 select 元素的 class，如果设为 true，Chosen 将把 select 的 class 添加到容器上
  6. max_selected_options：默认值Infinity，最多选择项数，达到最大限制时会触发 chosen:maxselected 事件
  7. no_results_text：默认值No results match，没有搜索到匹配项时显示的文字
  8. placeholder_text_multiple ：默认值Select Some Options，多选框没有选中项时显示的占位文字
  9. placeholder_text_single：默认值Select an Option，单选框没有选中项时显示的占位文字
  10. search_contains：默认值false，搜素包含项，默认从第一个字符开始匹配
  11. single_backstroke_delete：默认值true，多选框中使用退格键删除选中项目，如果设为 false，第一次按 delete/backspace 会高亮最好一个选中项目，再按会删除该项
  12. width：默认为和原 select 宽度保持一致
  13. display_disabled_options：默认值true， 是否显示禁止选择的项目
  14. display_selected_options：默认值true，多选框是否在下拉列表中显示已经选中的项

更多选项可从下载的源码options.html下找。
使用语法如下：

$(".my-chosen-select").chosen({disable_search:false, search_contains:true, no_results_text:'暂时您查找的项目'});

第五、select组件属性

组件关键属性就4个如下：

  1. data-placeholder：空白点位符，显示默认值
  2. multiple：多选择框属性，如<select data-placeholder="Choose a Country..." multiple class="my-chosen-select">...</select>
  3. selected:标识选项“选中与否”
  4. , disabled：禁止选中

语法如下：

 <select data-placeholder="Choose a Country..." class="my-chosen-select">
    <option value=""></option>
    <option value="United States" selected>选中</option>
    <option value="United Kingdom" disabled>禁止选中</option>
    <option value="Afghanistan">Afghanistan</option>
  </select>

效果如下：
这里写图片描述

第六、class样式

一个样式，左右颠倒文字和下拉框图片位置
语法如下：

<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 的监听函数：

  1. chosen:updated：当选项有变化时，可以主动触发该事件，chosen会重新渲染select组件。
  2. chosen:activate：相当于 HTML focus 事件
  3. chosen:open 激活 Chosen 并显示搜索结果
  4. chosen:close 关闭 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">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属性

第九、分组显示

要使用分组显示，在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>

效果如下：
这里写图片描述

第十、多选项

使用multiple属性即可将单选变成多选荐。如下：

<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>

结果如下：
这里写图片描述

总结

整个chosen学习完毕，
1.引入下面的1个css和2个js文件
2.正确使用配置初始化select组件
3.选项的修改只能通过拼装html方式，不提供操作单独数据源更新选项的操作。
4.丰富的事件。每次修改选项都必要触发$('.my-chosen-select').trigger("chosen:updated");事件。

完成html源码如下：

<!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>

文件中需要的库文件在源码里

陈袁
关注
专栏目录
chosen.jquery.js
10-30
chosen_v1.2.0.zip chosen.jquery.js jQuery Chosen Plugin 是一个 jQuery 插件，用来将网页中的下拉框进行功能扩展和美化。可实现对下拉框的搜索，多个标签编辑等功能 下载地址：https://github.com/harvesthq/chosen/releases
jquery-chosen.js插件
09-26
这个是jquery的下拉框插件,可以实现下拉框内模糊搜索的功能
jQuery 插件 Chosen实现可检索
长风破浪会有时的博客
07-04 843
当用户选择一个选项时，Chosen 会更新模拟的元素的显示，并将选中的值存储在隐藏的。当用户与 Chosen 下拉列表交互时，实际上是在与模拟的元素进行交互。元素为 Chosen 下拉列表时，Chosen 会对该元素进行处理，隐藏原始的下拉列表，并在其位置创建一个模拟的。这意味着在搜索时，Chosen 会匹配包含搜索关键字的选项，而不仅仅是以关键字开头的选项。元素转换为一个具有搜索功能的自定义下拉列表，提供了更好的用户体验和交互性。是 Chosen 插件提供的方法，将选定的元素初始化为可搜索的下拉列表。
Chosen
weixin_33958585的博客
04-01 337
前言： 想要达到下拉框有多选的情况。 过程： 1.因为本次工作项目使用的是surperUI，而它则是基于bootstrap框架搭建而成的。于是自然而然的就想到了使用bootstrap中的select插件。可是因为不太熟悉该框架的使用方法，于是看了一下使用方法，就上手写代码了。知道最终研究细节时，才发现出现了一些问题： 首先，不会取到select的value值；其次，不会回显其值。反复考量之...
jQuery Chosen 使用
03-15 393
jQuery Chosen 使用 1.　jQuery Chosen 选择框下拉值重置； 1 2 3 4 //重置 $("#easySelBrands").val("默认值").trigger("chosen:updated"); 　　赋值为默认值后要用t...
chosen.jquery.js 插件的使用和总结
cheng1a的博客
09-01 6506
Chosen 是select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。此外，还可以搜索查找下拉选项。它可对列表进行分组，同时也可禁用某些选择项。chosen.jquery.js 让你下拉框更简洁实用！chosen插件下载及使用教程：https://harvesthq.github.io/chosen/chosen插件的选项介绍：https://harvesthq.github.io/chosen/options.htmlchosen插件css线上cdn引入： chosen插件
Chosen 基于jquery的选择框插件使用方法
12-11
Chosen插件下载地址 //www.jb51.net/jiaoben/38027.html 代码如下: [removed][removed] [removed][removed] 应用JS文件 代码如下: <select class=”chzn-select” data-placeholder=”Ch
jquery-chosen
07-20
`jQuery Chosen`是一个广泛使用的jQuery插件，它为传统的HTML下拉选择框提供了强大的增强功能和优雅的界面。这个插件的主要目标是通过简单的API，让开发者能够轻松地将普通的下拉框转变为功能丰富的多选或单选组件，...
Chosen:jQuery插件，使选择框更加人性化-开源
04-25
Chosen是一个jQuery插件，使长而笨拙的选择框更加人性化。 选择后会自动突出显示所选选项，并删除禁用的选项。 通过读取选择元素的数据占位符值，选择来自动设置默认字段文本（“选择国家...”）。 如果不存在数据...
jquery插件chosen的使用
热门推荐
半路出家，立地为猿
06-24 1万+
一、 文件引入jquery //jquery必须,且需要在chosen.js之前 chosen.jquery.min.js //压缩版的chosen核心jquery代码 chosen.css //chosen 的样式文件二 、代码示例1 . html 代码<select class="chosen-select" data-placeholder="C
下拉框美化插件chosen
03-19
下拉框美化插件chosen
chosen.jquery.js美化以及实现模糊搜索
09-01
Chosen：select下拉选择框美化插件及实现模糊搜索，Chosen 是一个支持jQuery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动筛选的功能。它可对列表进行分组，同时也可禁用某些选择项。
chosen.jquery
05-09
chosen。jaunty是一个支持模糊查询的可输入select下拉框，用法特别简单。
Jquery select 插件 chosen
06-08
Jquery select 插件 select
jQuery 对Select 进行操作
dacong910的专栏
10-22 622
转帖自：http://edicky.javaeye.com/blog/403682   /*文件名:jquery.liu.select.js功能说明:本js文件为jquery类库的一个插件,主要实现对select的操作.作者:John Liu编写日期:2008/03/12*///得到select项的个数jQuery.fn.size = function(){    return j
jquery select 操作
weixin_30332241的博客
10-31 89
jQuery获取Select选择的Text和Value: 语法解释： 1. $("#select_id").change(function(){//code...}); //为Select添加事件，当选择其中一项时触发 2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text 3. var ...
chosen下拉框
chibingyou4498的博客
09-06 478
<link href="../chosen/chosen.css" rel="stylesheet"/> <script src="../chosen/chosen.jquery.js"/> 属性： <select class="chosen-select...
jquery chosen 获取选中的文本
最新发布
weixin_26854475的博客
07-21 116
字符串相关学习资料：https://edu.51cto.com/video/3832.htmlhttps://edu.51cto.com/video/4055.htmljQuery Chosen 插件：获取选中的文本 jQuery Chosen 是一个流行的 jQuery 插件，它为标准的 HTML select 元素...
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值