Chosen

最新推荐文章于 2021-12-22 17:16:59 发布
最新推荐文章于 2021-12-22 17:16:59 发布
阅读量791 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jygongweibin/article/details/38932225
版权

Chosen 是一个JavaScript插件，它能让丑陋的、很长的select选择框变的更好看、更方便。目前，它支持 jQuery 和 Prototype 两种JavaScript引擎。

在GitHub上的官网

标准选项框效果对比

原始样子
  •                  
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  • 美化后效果：
  •                  
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   

  • 多选选择框对比效果

    原始样子
  •                  
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  • 美化后效果
  •                  
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   
  •                   

  • <optgroup> 标记的支持

    分组select单选效果
  •                  
  •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                
    分组select多选效果
  •                  
  •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                                     
  •                    
  •                    
  •                    
  •                  
    •                

    对 Selected 和 Disabled 属性的支持

    Chosen 会自动的把 selected 和 disabled 选择项去掉。

    单项选择
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                
    • 多项选择
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                  
  •                

    • 对缺省显示文字的支持

    在select标签上加入 data-placeholder='...' 属性和值，Chosen 会自动读取这个值作为缺省显示文字。如果你没有提供 data-placeholder='...' 这样的属性和值，它会缺省显示“请选择”。你可以在这个js插件源文件里修改这个值。

    <select data-placehoder="选择国家..." style="width:350px;" multiple class="chzn-select"">

    注意： 对于单项选择框，浏览器通常缺省显示选择项的第一项，如果你想使用Chosen插件的缺省显示效果，你需要把选择项的第一项的值和内容都留作空白。

    对右对齐的支持

    Chosen支持对选择项的左对齐显示效果。你只需要在Select标签上加入class属性里再加入"chzn-rtl"就行了。

    <select class="chzn-select chzn-rtl">

    单选框的右对齐
  •            
  •            
  •            
  •            
  •            
  •            
  •            
  •          
    • 对选框的右对齐
  •            
  •            
  •            
  •            
  •            
  •            
  •            
  •          

    • 对Change事件/Update事件的支持

    • 对Change事件的响应

      在进行表单操作时，你经常会遇到一些在某些选择项被选中，或选择项改变时，去触发某些操作的情况。而在Chosen里，用户在任何时候选中一个选择项时，都会触发一个change事件。你可以这样去写这个change操作：

      $("#form_field").chosen().change( … );

      注意： 因为Prototype不支持标准浏览器里的事件触发，如果你使用Prototype作为JavaScript引擎，你需要使用Event.simulate来实现事件触发。

    • Chosen 选择项的动态修改/更新

      如果你需要去动态更新select选择框里的选择项，你需要通知Chosen去响应这个变动，你需要在这个选项框是触发一个"liszt:updated"事件，这样Chosen就会对更新过内容后的select选择框重新进行渲染。

      • jQuery 版: $("#form_field").trigger("liszt:updated");
      • Prototype 版: Event.fire($("form_field"), "liszt:updated");

    为什么要使用Chosen？

    • 用户使用更方便

    • 功能增强

    • 开发人员容易使用

    开发人员使用方法

    Chosen用起来非常的简单。

    1. 下载这个插件，把相关文件拷贝的你的应用里。
    2. 激活这个插件：
      • jQuery 版: 直接调用 chosen 插件 - $(".chzn-select").chosen()
      • Prototype 版: 在选择框是加入属性class='chzn-select'即可。
    jygongweibin
    关注
    • 0
      点赞
    • 踩
    • 1
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    Chosen资源
    02-15
    "Chosen资源"这个标题指的是一个与Chosen相关的压缩包，它包含了Chosen库的CSS样式表和JavaScript文件。Chosen是一款广泛使用的前端选择器插件，它旨在改善原生HTML `<select>` 元素的用户体验。这款插件由 Harvest ...
    chosen多选select
    03-27
    `chosen.css` 和 `chosen.min.css` 文件包含Chosen库的默认样式，用于实现其独特的视觉效果。你可以根据项目需求对这些样式进行调整，以符合网站或应用的整体设计风格。 3. **JavaScript组件** - `chosen.proto....
    chosen 数据的动态更新
    javabaidu的专栏
    09-08 1052
    chosen是个不错的复合下拉组件，缺点是文档较少 源码在github [url=https://github.com/harvesthq/chosen]harvesthq chosen[/url] 对于已有数据，特别好用，但是数据通过js动态加载后，显示的还是老数据 数据更新的方法 [code="javascript"] //销毁原有chosen $("select").cho...
    chosen.js
    冰雪为融的博客
    10-15 1637
    /*! Chosen, a Select Box Enhancer for jQuery and Prototype by Patrick Filler for Harvest, http://getharvest.com Version 1.3.0 Full source at https://github.com/harvesthq/chosen Copyright (c) 2011-20...
    chosen.css
    冰雪为融的博客
    10-15 5064
    .chosen-container { position: relative; display: inline-block; vertical-align: middle; font-size: 12px; height: 31px; line-height: 1.42857143; background-color: #F9F9F9; ...
    chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值 ，chosen 实现远程搜索加载下拉选项
    JCM_ZZ的博客
    12-22 1612
    chosen.jquery.js 、chosen-select 源码修改控制 chosen:updated 方法动态更新下拉框选项不更新搜索框值，chosen 实现远程搜索加载下拉选项 chosen.jquery.js 修改后源码 源码中新增了 clear_search 属性，控制chosen:updated 方法动态更新下拉框选项不更新搜索框值 /*! Chosen, a Select Box Enhancer for jQuery and Prototype by Patrick Filler fo
    chosen下拉框
    chibingyou4498的博客
    09-06 460
    <link href="../chosen/chosen.css" rel="stylesheet"/> <script src="../chosen/chosen.jquery.js"/> 属性： <select class="chosen-select...
    jquery chosen插件使用及select常用方法
    ☆╮123☆
    07-24 2549
    1、chosen插件使用 chosen插件依赖于jQuery库或prototype，使用之前要先引入jQuery或prototype。 引入jquery插件和chosen插件，对需要美化的下拉框执行chosen函数：$(selector).chosen(options)。可以把selector写成样式类，这样执行完chosen函数后，只要加上样式类就可以了。 举例 <head...
    chosen插件的使用
    热门推荐
    wangxiuyan0228的博客
    03-02 1万+
    一、Chosen 选项列表通过参数传递的选项以下参数在实例化的时候通过参数设置。$('.my_select_box').chosen({ disable_search_threshold: 10, no_results_text: 'Oops, nothing found!', width: '95%' });选项默认值描述allow_single_deselectfalse设置为 t...
    关于jq chosen的使用心得
    suguangzhong的博客
    04-25 789
    jQuery Chosen 使用 html代码 单选 <select class="width-100 nochosen" data-placeholder="请选择" id="enterpriseId"></select> 多选 <select class="width-100 nochosen" data-placeholder="请选择" multipl...
    chosen插件的源代码
    08-03
    3. 初始化Chosen插件：在jQuery的`$(document).ready()`函数内，对需要应用Chosen的`<select>`元素调用`.chosen()`方法。 ```javascript $(document).ready(function() { $("#your-select-element").chosen(); }); ...
    select chosen
    10-25
    选择框需要引入资源文件 select chosen jquery min js
    Jquery chosen动态设置值实例介绍
    12-12
    没办法就看源码，发现在其初始化的时候有一个判断如下图： 发现有个destroy是不是(“#city).chosen(“destroy”);就可以了呢。把猜想试了一下果然可以。在这之前调试过其生成的dom想通过直接将其生成的dom移除掉，...
    chosen插件
    EternitySunshine的博客
    08-16 1271
           最近做项目，需要完成一个可搜索的select下拉框，最后选择了chosen这个插件来实现，很好用，简单记录一下这个插件的用法。 1.首先在官网上下载插件，导入项目 chosen-sprite@2x.png、chosen-sprit@.png这两张图片需要和chosen.css放在一起 2.引入 &lt;script type="text/javascript" src="&l...
    培训课件 -从0到1搭建培训管理体系.pptx
    07-13
    培训课件 -从0到1搭建培训管理体系.pptx
    tensorflow-gpu-2.9.0-cp37-cp37m-win-amd64.whl.zip.(whl)
    最新发布
    07-14
    使用时需去掉后缀.(whl)后再解压
    JavaScript：ES6新特性深入解析
    07-14
    JavaScript：ES6新特性深入解析
    vue 绑定 chosen
    05-24
    Chosen 是一个基于jQuery的库，用于增强`<select>`元素的样式和交互。在Vue中绑定Chosen可以通过以下步骤： 1. 安装Chosen的依赖包jquery和chosen： ```bash npm install jquery chosen-js --save ``` 2. 在Vue组件中引入jquery和chosen： ```javascript import $ from 'jquery' import 'chosen-js' import 'chosen-js/chosen.css' ``` 3. 在Vue组件的`mounted`生命周期中，使用jquery选择器选中需要绑定Chosen的`<select>`元素，并调用`chosen()`方法来初始化Chosen： ```javascript mounted() { $(this.$refs.select).chosen() } ``` 4. 在模板中，在需要绑定Chosen的`<select>`元素上添加`ref`属性： ```html <select ref="select"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> ``` 这样就完成了Vue中绑定Chosen的过程。需要注意的是，Chosen只能在元素被渲染后才能被初始化，因此需要在`mounted`生命周期中进行初始化。同时，为了能够正确地选择需要绑定Chosen的`<select>`元素，需要给它添加一个`ref`属性。

    “相关推荐”对你有帮助么？

    • 非常没帮助
    • 没帮助
    • 一般
    • 有帮助
    • 非常有帮助
    提交
    评论
    添加红包

    请填写红包祝福语或标题

    个

    红包个数最小为10个

    元

    红包金额最低5元

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

    抵扣说明：

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

    余额充值