zoukankan      html  css  js  c++  java
  • jq下拉插件,chosen

    Chosen 选项列表


    <select data-placeholder="请选择" class="chosen-select"  tabindex="2">
                    <option value="">Select</option>
                    <option value="United States">United States</option>
                    <option value="United Kingdom">United Kingdom</option>
                    <option value="Afghanistan">Afghanistan</option>
                    <option value="Zimbabwe">Zimbabwe</option>
                    </select>

     

    通过参数传递的选项

    以下参数在实例化的时候通过参数设置。

    $('.my_select_box').chosen({
      disable_search_threshold: 10,
      no_results_text: 'Oops, nothing found!',
      width: '95%'
    });
    选项默认值描述
    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 多选框是否在下拉列表中显示已经选中的项

    属性

    可以通过在 <select> 上设置属性传递给 Chosen。

    <select class="my_select_box" data-placeholder="Select Your Options">
      <option value="1">Option 1</option>
      <option value="2" selected>Option 2</option>
      <option value="3" disabled>Option 3</option>
    </select>
    属性描述
    data-placeholder 占位符文字 
    注意: 改属性会覆盖 placeholder_text_multiple 或 placeholder_text_single 选项。
    multiple 有此属性的 select 会渲染成可以多选的 Chosen 选框
    selected, disabled 设置选中、禁止状态,Chosen 会读取这些属性

    触发事件

    Chosen 会在源 <select> 元素上触发事件。

    $('.my_select_box').on('change', function(e, params) {
      do_something(e, params);
    });
    事件描述
    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 对象作为参数。

    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 并隐藏搜索结果

  • 相关阅读:
    Vue cmd命令操作
    迭代器和生成器
    10-外键的变种 三种关系
    09-完整性约束
    08-数据类型(2)
    07-数据类型
    06-表的操作
    05-库的操作
    04-基本的mysql语句
    03-MySql安装和基本管理
  • 原文地址:https://www.cnblogs.com/liuq1991/p/8511082.html
Copyright © 2011-2022 走看看