资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

基于BootStrapmultiselect.js实现的下拉框联动效果

这篇文章主要介绍基于BootStrap multiselect.js实现的下拉框联动效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联公司联系电话：18980820575，为您提供成都网站建设网页设计及定制高端网站建设服务，创新互联公司网页制作领域十载，包括成都木制凉亭等多个方面拥有丰富的网站运维经验，选择创新互联公司，为网站锦上添花。

js的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于Node.js技术进行服务器端编程。

背景：当option特别多时，一般的下拉框选择起来就有点力不从心了，所以使用multiselect是个很好的选择，可以通过输入文字来选择选项很方

1、先引入


  

然后全局定义

 function RegSelect() {
      $('.multiselect').multiselect({
        buttonClass: 'btn btn-white ',
        enableFiltering: true,
        enableHTML: true,
        includeSelectAllOption: true,
        selectAllText: '全选',
        allSelectedText: '全部选中',
        nonSelectedText: '请选择',
        nSelectedText: '个被选中',
        templates: {
          button: '  ',
          ul: '',
          filter: '
',           filterClearBtn: '',           li: '
    • ',           divider: '',           liGroup: ''         }       });     }

    只需要在页面加载时RegSelect();（只能调用一次，不然会出现问题）就可以了

    2、两个下拉框

     
          维修单位
          
            @Html.DropDownList("RepairOrgUID", ViewBag.OrgList as List, "请选择", new { @class = "form-control multiselect", onchange = "OrgChange(this)", id = "RepairOrg" })
          
            
                       维修人                        @Html.DropDownList("RepairContactUID", ViewBag.ContactList as List, "请选择", new { @class = "form-control multiselect", id = "RepairContact" })                    

    3、js代码

    function OrgChange(obj, patientID) {
      var RepairOrg = $(obj).val();
      $.post("/TerminalManage/GetContactByOrg", { RepairOrg: RepairOrg }, function (data) {     
        var newCitys = new Array();
        var obj = new Object();
        obj = {
          label: "请选择",
          value: ""
        };
        newCitys.push(obj);
        for (var i = 0; i < data.length; i++) {
          obj = {
            label: data[i].Text,
            value: data[i].Value
          };
          newCitys.push(obj);
        }
        $("#RepairContact").multiselect('dataprovider', newCitys);
        $('#RepairContact').multiselect('refresh');
      });
    }

    以上是“基于BootStrap multiselect.js实现的下拉框联动效果”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


    文章题目：基于BootStrapmultiselect.js实现的下拉框联动效果
    本文路径：http://cdkjz.cn/article/pcojcd.html
    返回首页 了解更多建站资讯

    相关资讯

    多年建站经验

    多一份参考，总有益处

    联系快上网，免费获得专属《策划方案》及报价

    咨询相关问题或预约面谈，可以通过以下方式与我们联系

    大客户专线   成都：13518219792   座机：028-86922220

    在线咨询 提交需求
    友情链接 交换友情链接
    川西大数据中心广汉锦华橡塑专业网站设计成都网页设计青羊总部基地雅安做网站成都品牌网站设计佑馨产后护理成都发电机维修关键词优化

    成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

    成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

    专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图