基于Bootstrap的下拉框多選 Bootstrap Multiselect 插件使用

基于Bootstrap的下拉框多選插件 Bootstrap Multiselect 的使用方法

1、首先去下載下傳代碼：https://github.com/davidstutz/bootstrap-multiselect

2、頁面中引入相關的JS和CSS

<link rel="stylesheet" href="/css/bootstrap.css" target="_blank" rel="external nofollow"  />
<link rel="stylesheet" href="/css/bootstrap-multiselect.css" target="_blank" rel="external nofollow"  type="text/css"/>
           

<script src="/js/jquery-2.1.1.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
           

3、Html代碼

<select id="example-getting-started" multiple="multiple">                                                            
<option value="1">PHP</option>
<option value="2">JAVA</option>
<option value="3">PYTHON</option>
<option value="4">LUA</option>
</select>
<input type="hidden" id="tags" name="tags" value="">
           

4、JS代碼

<script>
    $(document).ready(function() {
        $('#example-getting-started').multiselect({
            buttonText: function(options, select) {
                if (options.length === 0) {
                    return '請選擇标簽 ...';
                }else{
                    var labels = [];
                    options.each(function() {
                        if ($(this).attr('label') !== undefined) {
                            labels.push($(this).attr('label'));
                        }
                        else {
                            labels.push($(this).html());
                        }
                    });
                    $('#tags').val(labels.join(',') + '');
                    return labels.join(', ') + '';
                }
            }
        });
        
    });
    
    
</script>
           

5、如果要設定初始化選中的值隻需要在

<option value="1">PHP</option> 裡面設定成 <option value="1" selected="selected">PHP</option>