layui拓展之“下拉多选功能”

分享 已结
125 25149
驊驊龔頾
悬赏:20飞吻
修改了一个不是很严重的bug,就是选中以后提交的时候data.field里面无法获取全部的值进行保存,但是可以通过$("select").val()来获取,之前没有应用到实际项目中所以没有发现这个问题。再次抱歉,现已修改,两种取值的方法:
$("select").val(); //之前的版本可用
data.field.xx //之前的版本不可用,新版本可用
通过修改后,以上两种方法都可以取到select中的值进行保存。最后再次说声抱歉,我的不细心给大家带来了不好的体验
1、修改在edge、firefox浏览器中无法点击删除按钮的问题
2、优化关闭按钮在不同浏览器展示不同样式的问题【之前用的文字“×”,现在修改成了图片】
3、请在2017-10-27 11:45之前下载的用户重新下载,此bug带来的不便敬请谅解
代码之前弄成“内部公开”的了,造成大家不可下载,在此说声抱歉,现在大家可以下载了,另外目前已知的三个bug已经修改完毕,请在2017-10-26 15:22:00之前下载的朋友重新下载使用
最近发现很多朋友需要下拉多选的功能,虽然我不知道这种东西一般会用在什么环境下,但是既然大家有需求那就应该做一下,毕竟别的框架中也有这种功能。但是通过询问心姐,他说暂时不做,那么好吧,我自己搞一下吧。本来感觉挺简单的东西,刚开始做的时候也确实挺简单的。样式、功能等都调整完毕,准备发表。但是问题来了,不能进行赋值和取值,这就尴尬了,不能动态赋值和取值这有毛用,所以我又花了将近两天的时间【平时要上班的】搞了一下这个赋值取值,终于在我不懈的努力下搞定了这个功能,之所以说“不懈努力”是因为在这期间我自己挖了不少坑,还跳进去了,昨天晚上搞到凌晨2点多,晚上做梦都是在调整这个问题。好了废话不多说了,下面直接上演示。

演示地址  代码下载



经过我不断的完善,这个功能包含了除去“搜索功能”以外的全部select应该具备的功能,如:提交验证、取值、赋值、是否禁用等,同时如果选项过多还可以换行展示。之所以不包含搜索功能并不是不能支持,只不过看过演示效果的人都应该知道,这个值是添加到input的位置的【注意是位置,并不是添加到input中的】,如果想要搜索功能那就需要对input进行一些复杂的操作,代码会增加很多,而且也会对美观度造成一定的影响,所以就没有添加。

重点来了,你把功能说的这么NB,那操作起来是不是比较麻烦啊?这点你完全不用担心,只需要给select标签添加一个【multiple】属性就可以了,当然其他的一些必要属性,比如name也是需要的,这里我只是说与其他不同的地方,下面是一个下拉复选的html写法
<select lay-filter="aaa" multiple name="aaa" lay-verify="required">      //注意这里的multiple 属性
<option value="">请选择您的兴趣爱好</option>
<option value="1" disabled>旅游</option>
<option value="2">唱歌</option>
<option value="3">爬山</option>
<option value="4">游戏</option>
<option value="5">台球</option>
<option value="6">阅读</option>
<option value="7">看电影</option>
</select>
具体的请查看演示地址,下载源码进行实际使用测试,欢迎提bug
回帖
本帖已设置禁止回复