效果图如上!插件地址:https://github.com/iIASDAFDF/Dselector
演示网址:https://iiasdafdf.github.io/Dselector/
一个简单易用的下拉表单,可选择多个选项,解决option过长问题!
这是1.3版本 目前只有两种选择框形式
一个页面可以使用多个选择框!您只需要新建实例对象即可
1.使用方法:
1.1定义一个容器
<div class="selector"></div>
<button class="button" onclick="getData()">点我在控制台输出选择的数据</button>
1.2引入此插件
<script src="Dselector.js" type="text/javascript"></script>
1.3实例化对象
定义第一个选择框
var SE=new Dselect({//Dselect对象实例化
el:'.selector',//绑定容器
data:[22,33,44,55,66,77],//初始化数据,数据格式为数组或对象数组
width:'300px',//定义宽度
})
定义第二个选择框
var SE2=new Dselect({
el:'.selector2',
data:[{aa:66},{aa:77},{aa:99},{aa:29},{aa:30},{aa:41}],
key:'aa',//如果您输入的数据类型是一个对象数组,您需要定义‘key’,'key'的值将作为option的显示文本
width:'300px',
group:1,//限制可选最大个数
color:"chocolate"//您可以定义您的选择框皮肤颜色
})
定义第三个选择框
var SE3=new Dselect({
el:'.selector3',
data:[{aa:66},{aa:77},{aa:99},{aa:29},{aa:30},{aa:41}],
key:'aa',//如果您输入的数据类型是一个对象数组,您需要定义‘key’,'key'的值将作为option的显示文本
width:'300px',
module:'typeTwo',//开启第二种模式 可以输入和下拉,此模式只能单选
match:'greedy'//在typeTwo模式下可以开启匹配功能,'upmake'为摄取模式,符合js字符串匹配规则,'greedy'为贪婪模式,可以不按照字符顺序进行匹配
})
1.4输出选择的结果
function getData(){//您只需要拿取Dselect实例对象的Selected,即可得到您选择的数据
console.log(SE.Selected)
}
new!!!增加onchange事件!当选择内容改变时 onchange事件会触发!
使用方法!
SE.onchange=function(){console.log(this.Selected)}