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>