Javascript 多选复选框下拉菜单

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30493858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 05:16:18  来源:igfitidea点击:

multiselect checkbox dropdown

javascriptjqueryasp.nettwitter-bootstrap

提问by Maddy

I am using multiselect checkbox dropdown.

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

Please look example jsfiddle

请看示例jsfiddle

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

Once you select states it show then TEXT value and concat with comma like: New Jersey, New York, Ohio

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

But I want VALUE of that selected ITEM like: NJ, NY, OH

但我想要所选项目的价值,例如:NJ、NY、OH

回答by Ersin Basaran

You can use buttonTextoption of multiselect.

您可以使用多buttonText选选项。

http://jsfiddle.net/ejqngpn5/

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(', ') + '';
        }
    }

});

回答by Mahedi Sabuj

Use buttonTextoption of multiSelect Plugin. The Parameter optionsgive you all the option you select. Then format your buttonText value as you want.

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

Script

脚本

$(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(', ');  
     }
  }); 
});

Take a look at the fiddle: http://jsfiddle.net/74b5pkpv/

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