经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » jQuery » 查看文章
下拉框一级树形多选 框
来源:cnblogs  作者:wuyong360  时间:2019/11/4 8:43:36  对本文有异议

   有一个单选下拉框要改成多选,里面还有一个全部选项,当选择全部时要全部勾选上,类似于树形下拉框。效果如下:

       

 

传到后台的数据就根据自己的需要做修改了,当选择全部时就只传全部这一个值,但后台查出来的数据是要满足所有项的,当然取消全部时在查询的时候也还是要满足所有项。代码如下:

添加fSelect.css,jquery.js,fSelect.js

-----html-----

<select class="demo" v-model="preType" multiple="multiple" >
<option value="-1">全部</option>
<option value="1">普通处方</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>
<option value="8">精神药品处方</option>
<option value="9">丸剂</option>
<option value="10">膏方</option>
<option value="11">协定膏方</option>
<option value="12">协定方</option>
<option value="13">小包装</option>
<option value="14">草药包</option>  
</select>

 ------script---------

$('.demo').fSelect({
     showSearch: false,
     placeholder:'全部'
});

 下面是获取选择的值,只是不知道为什么select的数据源不能动态加载,还望大咖指点迷津

var selet = [].map.call($('.fs-option.selected'), function (el) {
if (el.dataset.value == "-1")
return "-1";
else
return el.dataset.value
})

这样就可以了,只是为了我的需求代码有改动,搜索框也去掉了,原文取自于:https://github.com/mgibbs189/fSelect

我的fSelect.js有一点点改动。https://download.csdn.net/download/qq_27169469/11949996

 

原文链接:http://www.cnblogs.com/w1-y2-q5/p/11777092.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号