星联网络专注帝国CMS二次功能插件开发-精品网站模板站长代码素材

  • 最近更新
  • 模板:33
  • 记录:12641|
  • 插件:52|
  • 工具:4|
  • 代码:8|
  • 评论:0

下拉框一级树形多选 框

前言

本文重点解决下拉框一级树形多选框问题,希望能够帮助到你

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

       

 

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

添加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

后通过查找easyui的combotree其实就是实现的此功能

 

本网刊登的文章均仅代表作者个人观点,并不代表本网立场。文中的论述和观点,敬请读者注意判断。

本文地址:http://www.xlkjgs.com/notes/js/2424.html

以上内容由本站整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

星联网络

星联网络是中国最具实战的互联网创业者的知识服务商,这里有互联网行业动态,网络推广,SEO优化,SEM优化,ESC配置,行业经验分型,互联网项目,微信营销、淘宝客赚钱、新媒体营销、京东运营、跨境电商等众多互联网营销知识分享

站长运营站长必备网站运营之道才能长久发展