日常開發中，可能會遇到要做帶多選框的下拉，如下圖

是不是你想要的呢，下面來談談實現，我這個用的是一個bootstrap multiselect 外掛，至於下載啥的網上到處都有

<select id="area" class="form-control text-input-280" multiple="multiple">
                        <option value='1'>北京</option>
                        <option value='2'>上海</option>
                        <option value='3'>重慶</option>
                        <option value='4'>廣州</option>
                    </select>
 

對應js（要放在document.ready方法裡）

$('#area').multiselect({
               nonSelectedText: '   請選擇  ',
               buttonWidth:'180px',
               includeSelectAllOption: true,
               selectAllNumber: false,
               selectAllText: '全國',
               allSelectedText: '全國'
        });
 

至於每個欄位啥意思試驗下就知道了

由於獲取不到選中的值（1,2，3之類的，不是北上廣），所以在原始碼中添加了方法

修改bootstrap multiselect.js，新增一個方法

$label.attr('vals', $element.attr('vals'));

updateSelectedValue: function() {
            var selected = [];
            $('#area option:selected').each(function() {
                selected.push([$(this).val(), $(this).data('order')]);
            });
            selected.sort(function(a, b) {
                return a[1] - b[1];
            });

            var text = '';
            for (var i = 0; i < selected.length; i++) {
                text += selected[i][0] + ', ';
            }

            text =text.substring(0, text.length - 2);

            $('.multiselect', this.$container).attr('vals', text);
        },
 

這個函式需要在很多地方執行，如果大家不知道在哪些地方執行，那麼找到原始碼中的 this.updateButtonText();方法後面就好了，有多個這個方法，就加多少個。

這樣的話就ok啦。

通過F12，我們看到了我們想要多的值了