多选复选框下拉菜单答案

【问题标题】：multiselect checkbox dropdown多选复选框下拉菜单
【发布时间】：2015-05-28 06:34:47
【问题描述】：

我正在使用多选复选框下拉菜单。

请看例子jsfiddle

$(function () { $('#lstStates').multiselect({ }); });

选择州后，它会显示 TEXT 值并用逗号连接，例如：新泽西州、纽约州、俄亥俄州

但我想要所选项目的价值例如：新泽西州、纽约州、俄亥俄州

【问题讨论】：

标签： javascript jquery asp.net twitter-bootstrap

【解决方案1】：

您可以使用多选的buttonText 选项。

http://jsfiddle.net/ejqngpn5/

$('#lstStates').multiselect({ 
    buttonText: function(options, select) {
        console.log(select[0].length);
        if (options.length === 0) {
            return 'None selected';
        }
        if (options.length === select[0].length) {
            return 'All selected ('+select[0].length+')';
        }
        else if (options.length >= 4) {
            return options.length + ' selected';
        }
        else {
            var labels = [];
            console.log(options);
            options.each(function() {
                labels.push($(this).val());
            });
            return labels.join(', ') + '';
        }
    }

});

【讨论】：

如果您不使用 console-polyfill 或类似的，请确保删除 console.log 语句。

【解决方案2】：

使用 multiSelect 插件的 buttonText 选项。参数 options 为您提供您选择的所有选项。然后根据需要格式化 buttonText 值。

脚本

$(function () {
   $('#lstStates').multiselect({
      buttonText: function(options){
         if (options.length === 0) {
            return 'No option selected ...';
         }

         var labels = [];
         options.each(function() {
           if ($(this).attr('value') !== undefined) {
               labels.push($(this).attr('value'));
           } 
         });
        return labels.join(', ');  
     }
  }); 
});

看看小提琴：http://jsfiddle.net/74b5pkpv/

【讨论】：