UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery轻量级下拉框插件Dropdown

所属分类：输入-选择框

 70314  390  查看评论 (114)
分享到微信朋友圈
X
jQuery轻量级下拉框插件Dropdown ie兼容8
 查看演示  website  立即下载

更新时间：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支持readonly或disabled，不传则取消readonly/disabled                
returnundefined
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.changeStatus('readonly') // readonly
dropdown.changeStatus('disabled') // disabled
dropdown.changeStatus() // cancel

destroy()

参数类型描述
statusString支持readonly或disabled，不传则取消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);
  }
});
相关插件-选择框
查看更多

酷炫的发光单选框

 发光的动态竖直单选框
  选择框
 25232  331

聚焦input框，显示下拉框（原创!!）

 鼠标聚焦input框，之接显示下拉内容，点击输入框以外的地方因关闭下拉框。
  选择框
 31343  313

jQuery模拟select下拉框插件SelectBox

 自动模拟框，并且可以手动输入，可以模糊性查找
  选择框
 41080  341

jQuery下拉框美化插件

 jQuery自定义select下拉框美化插件
  选择框
 40303  362

讨论这个项目（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
    这个不支持大写字母搜索吗 回复
    Ｍc/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',
    回复
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复