快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

基于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://6mz.cn/article/pcojcd.html