jquery-chosen.js示例使用方法
程序员文章站
2022-06-21 20:57:36
...
## jquery-chosen.js示例使用方法
1. [地址](https://harvesthq.github.io/chosen/)
2. [CDN](https://cdnjs.com/libraries/chosen)
1. [地址](https://harvesthq.github.io/chosen/)
2. [CDN](https://cdnjs.com/libraries/chosen)
<select id="fruit" name="fruit" class="chosen-choices" data-placeholder="单选水果"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> <option value="pear">梨</option> </select> <select id="fruits" name="fruits" multiple class="chosen-choices" data-placeholder="多选水果"> <option value="apple">苹果</option> <option value="orange">橘子</option> <option value="banana">香蕉</option> <option value="pear">梨</option> </select>
$(function() { // 初始化 $('.chosen-choices').chosen({ no_results_text: "没有找到结果!",//搜索无结果时显示的提示 search_contains:true, //关键字模糊搜索。设置为true,只要选项包含搜索词就会显示;设置为false,则要求从选项开头开始匹配 allow_single_deselect:true, //单选下拉框是否允许取消选择。如果允许,选中选项会有一个x号可以删除选项 disable_search: false, //禁用搜索。设置为true,则无法搜索选项。 disable_search_threshold: 0, //当选项少等于于指定个数时禁用搜索。 inherit_select_classes: true, //是否继承原下拉框的样式类,此处设为继承 width: '100%', //设置chosen下拉框的宽度。即使原下拉框本身设置了宽度,也会被width覆盖。 }); }); // 取值 var fruit = $('#fruit').find('option:selected').val(), fruits = $('#fruits').find('option:selected').val(); // 更新select $('#fruit').append('<option value="pitaya">火龙果</option>').trigger('chosen:updated'); $('#fruits').append('<option value="pitaya">火龙果</option>').trigger('chosen:updated');
选项 | 描述 | 取值 |
-- | -- | -- |
no_results_text | 无搜索结果显示的文本 | 文本说明 |
allow_single_deselect | 是否允许取消选择 | [true,false] |
max_selected_options | 当select为多选时,最多选择个数 | 数字 |
search_contains | 键字模糊搜索。设置为true,只要选项包含搜索词就会显示;设置为false,则要求从选项开头开始匹配 | [true,false] |
disable_search | 禁用搜索。设置为true,则无法搜索选项。 | [true,false] |
disable_search_threshold | 当选项少等于于指定个数时禁用搜索 | 数字[0] |
inherit_select_classes | 是否继承原下拉框的样式类,此处设为继承 | [true,false] |
placeholder_text_single | 单选选择框的默认提示信息,当选项为空时会显示。如果原下拉框设置了data-placeholder,会覆盖这里的值 | 文本 |
max_shown_results | 下拉框最大显示选项数量 | 数值 |
single_backstroke_delete | 表示按两次删除键才能删除选项,true表示按一次删除键即可删除 | [true,false] |
case_sensitive_search | 搜索大小写敏感 | [true,false] |
group_search | 选项组是否可搜 | [true,false] |
include_group_label_in_selected | 选中选项是否显示选项分组 | false不显示,true显示。默认false |
width | 设置chosen下拉框的宽度。即使原下拉框本身设置了宽度,也会被width覆盖 | '100%'或'100px' |
上一篇: 家庭火锅可以加什么配菜?
下一篇: 通过mycat实现mysql的读写分离