jQuery轻量级下拉框插件Dropdown

所属分类:输入-选择框

 71707  389  查看评论 (114)
分享到微信朋友圈
X
jQuery轻量级下拉框插件Dropdown ie兼容8

更新时间:2017/7/7 上午11:45:40

更新说明:修复 热心网友 守望 、那段晴 提的bug : 点击删除全部时,再次选择依然残留上一次选择的值


更新时间:2017/7/6 上午9:42:37

更新说明:

1. 修复value不支持中文的问题

2. 修复单选回调choice不触发


更新时间:2017/7/3 下午8:30:30

更新说明:version 1.1.3 

新增 update 方法修复 点击清除按钮默认提交表单 的行为。


更新时间:2017-6-29 09:25:59

更新说明:修复 网友 yoonfeng 发现的bug。


更新时间:2017-6-28 09:56:39

更新说明:修复了IE8不支持的bug,版本 1.1.1


Dropdown

Dropdown是面向PC端的基于jQuery开发的轻量级下拉框插件,支持key/value搜索,有token和select两种模式。

Version

1.1.3

Support

  • Internet Explorer 8+

  • Chrome for PC

  • Safari for PC

  • Firefox for PC

Based

jQuery 1.4+

Log

  • 2017-06-24 version 1.1.0

            a)  多选 select模式下增加一个 全部删除 按钮

            b)  新增 changeStatus 方法,提供readonly,disabled功能

            c)  新增 destroy,bindEvent,unbindEvent 方法

  • 2017-06-21 version 1.0.0 上线

Feature

  1. 支持 select 和 token 两种模式

  2. 支持 optgroup 分组

  3. 保留原生 select 的键盘操作

  4. 数据源可以直接通过接口 data 注入,也可以直接渲染 select>option ,由插件自动转换。

  5. 插件同步 select 和 ul>li 标签,便于表单字段提交及前端校验,

Principle

程序设计原理如下图所示: 

在一些前端渲染的场景,JSON数据是通过AJAX请求的,如果再拼成<option value="yyy">xxx</option> 就有点多余了。 在这种情况下,建议直接将JSON数据转为以下这种格式:

[
    {
      "id": 1, // value值
      "disabled": false, // 是否禁选
      "groupName": "分组名",  
      "groupId": 3,//分组ID
      "selected": false, // 是否选中
      "name": "Betty Deborah Jackson" // 名称
    },
    {
      "id": 2,
      "disabled": false,
      "groupName": "分组名",
      "groupId": 2,
      "selected": false,
      "name": "Jason Barbara Clark"
    }
    // more ...
    ]

Dropdown 会根据这个JSON来渲染 select > option

Options

名称描述类型默认
readOnly是否只读Booleanfalse            
limitCount选择上限NumberInfinity            
input搜索框模板HTML<input type="text" maxLength="20" placeholder="搜索关键词或ID">            
data数据源Array[]            
searchable是否可开启搜索Booleantrue            
searchNoData无数据模板HTML<li style="color:#ddd">查无数据,换个词儿试试 /(ㄒoㄒ)/~~</li>            
choice选择后回调函数Functionfunction(){}            

Methods

changeStatus(status)

参数类型描述
statusString支持readonlydisabled,不传则取消readonly/disabled                
returnundefined
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.changeStatus('readonly') // readonly
dropdown.changeStatus('disabled') // disabled
dropdown.changeStatus() // cancel

destroy()

参数类型描述
statusString支持readonlydisabled,不传则取消readonly/disabled            
returnundefined
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.destroy();

Usage

引入

<script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="./jquery.dropdown.css">
<script src="./jquery.dropdown.js"></script>

HTML 部分

<div class="dropdown-mul-1">
   <!-- PS: select标签需手动设置隐藏 -->
<select style="display:none"  name="" id="" multiple placeholder="请选择">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>
</div>

JavaScript 部分

$('.dropdown-mul-1').dropdown({
  limitCount: 40,
  multipleMode: 'label',
  choice: function () {
    console.log(arguments,this);
  }
});
相关插件-选择框

穿梭框(原创)

基于vue的双列表选择插件
  选择框
 33990  304

jQuery城市联动选择

jQuery城市三级联动选择
  选择框
 60916  466

jQuery国籍选择器(包含国籍代码)

jQuery国籍选择,数据是全的,排过序
  选择框
 30155  310

移动端城市选择插件(原创)

基于Vue移动端城市选择插件
  选择框
 30236  327

讨论这个项目(114)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    花花丶千骨 0
    2022/6/27 16:16:06
    在sarafi中打开不太友好,需要单击两次才能打开option。Andriod中正常 回复
    扮个艺术小生 0
    2021/8/28 1:39:16
    你好 我想问下这个不支持手机端吗? 回复
    ☆ 阿弗罗狄忒 ☆ 0
    2021/1/23 22:53:13
    我很好奇这个如何在方法回调[choice]中获取选中的条目ID之类的信息,不然怎么知道选中的那些,最好是以列表的形式返回
        ☆ 阿弗罗狄忒 ☆1
        2021/1/23 23:08:26

        仔细扒了一下数据结构发现可以这样,这个方法感觉不是很好,但是可以使用,仅供参考吧,各位小伙伴们,如果有更好的想法可以回复告知我一下

        choice: function() {
            console.log(arguments, this);
            var selectedList = [];
            $.each(this.name, function(i, v) {
                selectedList.push(parseInt($(v).find("i").attr("data-id")))
            });
            console.log(selectedList)
        }
        ☆ 阿弗罗狄忒 ☆1
        2021/2/25 19:59:31

        今天特地抽时间来看了一下之前写的这段程序
        推荐使用这种,不要用上面的了

        $('#selectedBox').down({
            data: vList,
            choice: function() {
                var selectedList = [];
                $.each(this.name, function(index, value) {
                    selectedList.push(vList[index].id);
                });
                console.log(selectedList);
            }
        });
    回复
    j_coding 0
    2020/7/27 11:59:35
    这个不支持大写字母搜索吗 回复
    Mc/yx 0
    2020/1/15 20:27:17
    请问,用户登录的时候,如何初始绑定登录的用户呢 回复
    Temptatio丶唯一° 0
    2019/12/23 16:54:53
    大写字母搜索不好用.只有小写字母才可以搜 回复
    男人不可以穷?? 0
    2019/12/13 11:47:03
    怎么动态加载后台传过来的json数据渲染 回复
    男人不可以穷?? 0
    2019/12/13 11:17:27
    数据怎么渲染不了 回复
    Woow 0
    2019/11/22 15:02:13
    销毁事件写的不清楚,不好调用,每次调用的话会多好多个 回复
    Woow 0
    2019/11/21 10:07:18
    单选默认第一个会选中,怎么设置不让第一个选中?
        Woow1
        2019/11/21 13:27:20
        看了下插件是用select的option改成li的,select会默认选中第一个,可以把第一个设置个空值隐藏,或者操作dom改成placeholder
        Woow1
        2019/11/22 15:00:53

        单选将js的objectToSelect函数里

        var temp = '<option' + isDisabled + isSelected + ' value="' + val.id + '">' + val.name + '</option>';

        修改成

        var temp = '<option' + isDisabled + ' value="' + val.id + '">' + val.name + '</option>';

        以及renderSelect函数里

        // _this.$choseList.prepend(_this.name.join(''));

        注释掉,就可以不默认选中第一个了

        Woow1
        2019/11/25 17:11:09
        绑定事件里可以加上$el.on(EVENT_SPACE.input, 'input', $.proxy(action.search, _this));
        这样可以支持微软键盘的按数字键进行模糊搜索
        同时EVENT_SPACE变量里加上input: 'input.iui-down',
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复