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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ansu2009/article/details/80418025

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

1、首先去下载代码：https://github.com/davidstutz/bootstrap-multiselect

2、页面中引入相关的JS和CSS

<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/bootstrap-multiselect.css" 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>