css - 在引导多选下拉列表中显示选定的数字而不是复选框值

Question

我有 Bootstrap 多选下拉菜单，代码是：

<select class="multiselect" multiple="multiple">
    <option value="one">test value for one</option>
    <option value="two">test value for two</option>
    <option value="three">test value for three</option>
    <option value="four">test value for four</option>
</select>

每当我从 1 到 3 中选择时，它都会显示所选值。在下拉列表中选择第四个复选框后，它开始显示“4 Selected”。问题是我需要修复下拉列表的宽度，这样如果我选择一个，我需要显示 1 Selected 而不是第一个复选框值。我怎样才能做到这一点。

也试过这个，但我没有找到我真正需要的东西。http://davidstutz.github.io/bootstrap-multiselect/

提前致谢。

Answer 1

如果您使用的是http://davidstutz.github.io/bootstrap-multiselect/然后尝试以下代码...

演示链接

JS：

$('#example').multiselect({
     buttonWidth: '500px',
     buttonText: function (options) {
         if (options.length == 0) {
             return 'None selected <b class="caret"></b>';
         } else {
             var selected = 0;
             options.each(function () {
                 selected += 1;
             });
             return selected +  ' Selected  <b class="caret"></b>';
         }
     }
 });

HTML：

<select id="example" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>