bootstrap下拉多选框实现

需要去bootstrap官网下载相关的文件:
bootstrap 3.0版本官网地址下载:http://v3.bootcss.com/
bootstrap multiselect官网地址下载:http://webscripts.softpedia.com/script/Forms-and-Controls-C-C/Bootstrap-Multiselect-77899.html
在这里插入图片描述

<!--首先要引入以下的文件 -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

<select class="multiselect" multiple="multiple">
  <option value="中国">中国</option>
  <option value="美国">美国</option>
  <option value="大胖">大胖</option>
  <option value="中胖">中胖</option>
  <option value="小胖">小胖</option>
  <option value="微胖">微胖</option>
</select>
 
<script type="text/javascript">
  $(document).ready(function() {
    $('.multiselect').multiselect({
      buttonClass: 'btn',
      buttonWidth: 'auto',
      buttonText: function(options) {
        if (options.length == 0) {
          return '请选择渠道';
        }
        else {
          var selected = '';
          options.each(function() {
            selected += $(this).text() + ',';
          });
          return selected.substr(0, selected.length -1) ;
        }
      },
    });
  });
</script>
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐