基于BootStrapmultiselect.js实现的下拉框联动效果-创新互联

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

公司主营业务:成都网站建设、成都网站制作、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出鄂托克免费做网站回馈大家。

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实现的下拉框联动效果”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联网站建设公司行业资讯频道!

    另外有需要云服务器可以了解下创新互联建站www.cdcxhl.com,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    名称栏目:基于BootStrapmultiselect.js实现的下拉框联动效果-创新互联
    转载来源:http://cdiso.cn/article/digjdh.html