素材8网-专注前端素材！
来源：https://www.sucai8.cn/39053.html

jQuery下拉菜单选中搜索框插件代码

  • 1244
  • 0
  • 0

Dropdown

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

Version

1.1.1

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
  • 支持 select 和 token 两种模式
  • 支持 optgroup 分组
  • 保留原生 select 的键盘操作
  • 数据源可以直接通过接口 data 注入，也可以直接渲染 select>option ，由插件自动转换。
  • 插件同步 select 和 ul>li 标签，便于表单字段提交及前端校验，

Principle

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



在一些前端渲染的场景，JSON数据是通过AJAX请求的，如果再拼成<option value="yyy">xxx</option> 就有点多余了。 在这种情况下，建议直接将JSON数据转为以下这种格式：
  1. [
  2.     {
  3.       "id": 1, // value值
  4.       "disabled": false, // 是否禁选
  5.       "groupName": "分组名",  
  6.       "groupId": 3,//分组ID
  7.       "selected": false, // 是否选中
  8.       "name": "Betty Deborah Jackson" // 名称
  9.     },
  10.     {
  11.       "id": 2,
  12.       "disabled": false,
  13.       "groupName": "分组名",
  14.       "groupId": 2,
  15.       "selected": false,
  16.       "name": "Jason Barbara Clark"
  17.     }
  18.     // more ...
  19.     ]
复制代码
Dropdown 会根据这个JSON来渲染 select > option
Options
名称 描述 类型 默认
readOnly 是否只读 Boolean false   
limitCount 选择上限 Number Infinity   
input 搜索框模板 HTML <input type="text" maxLength="20" placeholder="搜索关键词或ID">  
data 数据源 Array []   
searchable 是否可开启搜索 Boolean true   
searchNoData 无数据模板 HTML <li style="color:#ddd">查无数据，换个词儿试试 /(ㄒoㄒ)/~~</li>
choice 选择后回调函数 Function function(){}   

Methods

changeStatus(status)


参数 类型 描述
status String 支持readonly或disabled，不传则取消readonly/disabled   
return undefined
  1. var dropdown = $('selector').dropdown(options).data('dropdown');
  2. dropdown.changeStatus('readonly') // readonly
  3. dropdown.changeStatus('disabled') // disabled
  4. dropdown.changeStatus() // cancel
复制代码


destroy()
参数 类型 描述
status String 支持readonly或disabled，不传则取消readonly/disabled
return undefined
  1. var dropdown = $('selector').dropdown(options).data('dropdown');
  2. dropdown.destroy();
复制代码

Usage

引入

  1. <script src="http://cdn.bootcss.com/jquery/1.8.1/jquery.js"></script>
  2. <link rel="stylesheet" type="text/css" href="./jquery.dropdown.css">
  3. <script src="./jquery.dropdown.js"></script>
复制代码

HTML 部分

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

JavaScript 部分

  1. $('.dropdown-mul-1').dropdown({
  2.   limitCount: 40,
  3.   multipleMode: 'label',
  4.   choice: function () {
  5.     console.log(arguments,this);
  6.   }
  7. });
复制代码
相关素材
jQuery下拉菜单选中搜索框插件代码
  • 田野 刚刚下载了一个素材
  • Danielxu 刚刚下载了一个素材
  • 蓝蓝天空 刚刚下载了一个素材
  • Michael程 刚刚下载了一个素材
  • 朱先生 刚刚下载了一个素材
  • Hi2710 刚刚下载了一个素材
  • qqHzY1K 刚刚下载了一个素材
  • qqY82 刚刚下载了一个素材
  • qq耶嘿Soi 刚刚下载了一个素材
  • 肉圆子 刚刚下载了一个素材
  • 雁南飞 刚刚下载了一个素材
  • qqsummerVXz 刚刚下载了一个素材
  • bibubibu 刚刚下载了一个素材
  • 视觉 刚刚下载了一个素材
  • qq可乐seB 刚刚下载了一个素材
分享者：
分享者头像
小编
热门素材推荐
HTML素材网，HTML5模板，网页特效 微信公众账号二维码 淘宝店铺地址二维码
Copyright©2024  素材8  Powered by 智伙伴科技
   鲁ICP备14029286号-5 鲁公网安备37060202001967号
返回顶部返回顶部
发布主题