Code Monkey home page Code Monkey logo

dropdown's Introduction

Dropdown

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

Version

  • 1.2.0

Support

  • Internet Explorer 8+
  • Chrome for PC
  • Safari for PC
  • Firefox for PC

Based

  • jQuery 1.4+

Log

  • 2018-05-28 version 1.2.2

    • 优化value值的匹配,#33
  • 2017-10-13 version 1.2.0

    • 新增方法 reset
    • 搜索支持分组名
  • 2017-08-05 version 1.1.7

    • 修复BUG #6
  • 2017-08-05 version 1.1.6

    • 新增自定义字段 extendProps
    • 新增方法 choose
    • 优化回调函数 choice(event,data),新增第二个入参
    • #6
  • 2017-07-19 version 1.1.5

    • 新增 init 回调函数
    • 修复 #4 的问题
  • 2017-07-06 version 1.1.4

    • 修复value值为中文时的错误 #2
    • 修复单选无法触发回调问题 #2
    • 修复destroy时,事件未被移除的BUG #3
  • 2017-07-03 version 1.1.3

    • 新增 update 方法
    • 修复 点击清除按钮默认提交表单 的行为。
  • 2017-06-28 version 1.1.1

    • 修复 IE8 不兼容的问题
  • 2017-06-24 version 1.1.0

    • 多选 select模式下增加一个 全部删除 按钮
    • 新增 changeStatus 方法,提供readonly,disabled功能
    • 新增 destroy,bindEvent,unbindEvent 方法
  • 2017-06-21 version 1.0.0 上线

Feature

  1. 支持 selecttoken 两种模式
  2. 支持 optgroup 分组
  3. 保留原生 select 的键盘操作
  4. 数据源可以直接通过接口 data 注入,也可以直接渲染 select>option ,由插件自动转换。
  5. 插件同步 selectul>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 是否只读 Boolean false
minCount 下限 Number 0
minCountErrorMessage 下限自定義錯誤消息 String 最低选择个
limitCount 选择上限 Number Infinity
limitCountErrorMessage 上限的自定义错误消息 String 最多可选择个
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(){}
init 插件初始化后回调函数 Function function(){}
extendProps 扩展自定义字段 data-*,字段名必须在data中存在,否则无效 不建议扩展太多字段,会有性能影响 Array ['prop1','prop2']

Methods

changeStatus(status)

修改组件状态

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

choose(value,status)

动态选择值

参数 类型 描述
value String|Array 需要被选中的值,多个值用数字 ['one','two','three']
status Boolean 选中或取消,默认为: true
return undefined
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.destroy();

update(Array,isCover)

更新数据

参数 类型 描述
data Array 需要更新的数据
isCover Boolean 是否覆盖原有数据,默认不覆盖

destroy()

销毁组件

参数 类型 描述
return undefined
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.destroy();

reset()

重置

参数 类型 描述
return undefined
var dropdown = $('selector').dropdown(options).data('dropdown');
dropdown.reset();

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);
  }
});

Example

https://janking.github.io/dropdown/

dropdown's People

Contributors

janking avatar moh-slimani avatar shirishparsekar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

dropdown's Issues

Not being able to access POST data

Hello,

Everything works very well, but I can't get data with PHP. (only 1)

For example:

Result:

2

PHP Code:

$yillar = array($_POST['test']); 
var_dump($yillar); 

What could be the reason?
Thank you.

choose函数问题

$('.dropdown-mul-1').eq(i).data('dropdown').choose(hasselect[i])

user-info.js:54 Uncaught TypeError: $(...).eq(...).data(...).choose is not a function

问题

特殊字符串 你这边正则是不是没有过滤? data-value=“” 对于 { } 和 - 符号 好像不识别

多选、JSON渲染、分组功能,在 searchable = false 时,下拉数据不显示

var jsonArray = [
{
"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"
}
]
$('#dropdown-mul').dropdown({
data: jsonArray,
multipleMode: 'label',
searchable: false,
choice: function () {
console.log(arguments, this);
}
});

有几个bug

1、.dropdown-display要加上outline:none;否则当鼠标点击的时候outline会很难看,
2、.dropdown-main的margin-top由-1改为0,否则会挡住dropdown-display的下边框
3、点击dropdown-display会打开下拉框没问题,但是第二次点击的时候应该关闭,没有关闭掉,跟原生的select行为不一致,用起来感觉很别扭的

如何获取data-id 值?

console.log($(this.name[0]) 得到的是

< span class="dropdown-selected">ccc< i class="del" data- id="danny">< /span>

< span class="dropdown-selected">5< i class="del" data -id="vivien">< /span>

可是怎么获取danny和vivien呢?

发现了一个关于destroy的BUG

destroy之前没有取消控件的事件监听,会导致重新建立控件的时候出现多次触发event的BUG导致选择失效,在destroy()删除DOM元素之前先this.unbindEvent(); 可修复此BUG

2个优化建议

标签中默认没有option时,会报错,建议在第458行加上判断if(_this.name == null){_this.name = [];} 启动方法为什么不是$('#select_id').dropdown(.......),由插件在select上层添加一个div

set selected option from AJAX call

I have a set of data with 4 values [1, 2, 3, 4] from the AJAX call, and when I click the edit button, the dropdown doesn't set automatically the selected value. I would want to know if there is any way to set the dropdown option value set by the AJAX call. Below are the examples.

2020-09-09 09_31_10-Window
2020-09-09 09_32_53-Window

关于搜索大小写检索问题

不支持大写检索
js文件240行,条件少了个转大写
$.each(data, function (key, value) {
if (value.name.toUpperCase().indexOf(intputValue) > -1||value.name.toLowerCase().indexOf(intputValue) > -1|| '' + value.id === '' + intputValue) {
result.push(value);
}
});

Pre-select options

Hello,

How do I pre-select options on load?

Can it be done via callback?

分组查询

我想问下,下拉搜索能按分组名搜索吗?文本框中输入要查询的分组名,然后筛选出该分组下的数据,麻烦指导一下,谢谢!

Is there anyway to use onchange() call back function in label mode?

Currently there is only this "choice" option that allow a user to in a callback function. This work well if the 'label' mode is not set. When the 'label'mode is set, the 'choice' function is not being called while the user clicking the erase button from the label to deselect a button. I have also tried chain binding to the original select but it does not work too.

choose的问题

你好,在使用.data('dropdown').choose()的时候,如果我select标签里的value不是0,1,2,3,多选的显示不出来吗?
image

“多选、Option渲染” 有bug

多选后 点删除按钮 ,就是输入框右边那个“x”这个按钮,清空后,重新选,会发现上次的多选的内容又显示了

Clear all items

Hi,
have a nice day,
How can i easily clear the list (delete all items).

Thanks in advance

Encoding problem?

Is something wrong with the encoding or my browser, or is really every help and description in Chinese? It seems that this is far the best component I have found for my project, but I am not sure how to use it this way :( I would be really disappointed...

低版本的谷歌浏览器中点击事件失效

今天发现在谷歌浏览器37.0.2062.0版本下,下拉列表都能初始化,数据也能动态加载,但是点击时没有任何反应,就跟被disabled一样,有谁可以知道对应的触发事件对象是哪个?[email protected],我的邮箱地址,希望大家能够提供一些线索

修改文本框中的值

是这样,假如1.test这个选项,
我点击选择之后,1.test放入select选项框,但是我不想用1.test
而是想用test,有什么方法处理这个值然后再放进去么

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.