Как изменить метку мультиселекта начальной загрузки вместо выбранных всех?

Я использую раскрывающийся список Bootstrap Multiselect вместо номера списка, показывающего при выборе опции «Выбрать все», можем ли мы показать текст «Все выбранные».

http://davidstutz.github.io/bootstrap-multiselect/


jquery twitter-bootstrap bootstrap-multiselect
person user1121019    schedule 25.09.2013    source источник
comment
опубликуйте код, что вы пробовали до сих пор?   -  person Pratik    schedule 25.09.2013
comment
Я пытался отлаживать, но, похоже, он использует jquery.js напрямую. Там не похоже на пользовательский контент. Это выглядит неправильно, но странно. Если вы можете понять это до 3 выборов, вы, конечно, можете расширить его до 4,5,6.   -  person mithataydogmus    schedule 25.09.2013

Ответы (7)


arrow_upward
29
arrow_downward

Если кто-то ударит по этому вопросу в будущем, решение - изменить

{ nonSelectedText: 'None selected' }

присвойте этому тексту глобальную переменную, измените ее с помощью JavaScript.

значение находится в файле bootstrap-multiselect.js.

person Shamitha Silva    schedule 07.09.2014
comment
Я рад, что прокрутил вниз, это работает отлично. Вы можете установить noneSelectedText для каждого нового объекта множественного выбора, если у вас их несколько. Спасибо! - person Cody Reichert; 18.11.2014

arrow_upward
18
arrow_downward

Вы можете изменить текст «Метка» (мультиселектора начальной загрузки) для всех 4 случаев «не выбрано», «n выбрано», «Все» выбрано или «выбрано значения» следующим образом:

JQuery

$('#level').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150,
    buttonWidth: 150,
    numberDisplayed: 2,
    nSelectedText: 'selected',
    nonSelectedText: 'None selected',
    buttonText: function(options, select) {
      var numberOfOptions = $(this).children('option').length;
      if (options.length === 0) {
         return nonSelectedText + ' <b class="caret"></b>';
      }
      else{
             if (options.length > numberDisplayed) {
                 if(options.length === numberOfOptions){
                     return ' All Selected' + ' <b class="caret"></b>';
                 }
                 return options.length + ' ' + nSelectedText + ' <b class="caret"></b>';
             }else {
                 var selected = '';
                 options.each(function() {
                    var label = ($(this).attr('label') !== undefined) ?  
                                                       $(this).attr('label'):$(this).html();
                    selected += label + ', ';
                 });
                 return selected.substr(0, selected.length - 2) + ' <b class="caret"></b>';
             }
       }
    }
});

HTML

<select multiple="multiple" id="level">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Меня устраивает. Веселиться!

person Ram    schedule 15.09.2014
comment
Почему-то у меня не работает вся выбранная часть и попадает в часть nSelected... В основном не работает options.length === numberOfOptions, не знаю, что может быть не так.. У вас есть какие-то предложение? - person Ekin; 22.09.2015

arrow_upward
7
arrow_downward

Используйте параметры инициализации объекта.

$("#services").multiselect({
  nonSelectedText:'Services'
});

Этот вариант у меня работал.

person Philip Puthenvila    schedule 01.04.2015
comment
Опечатка, свойство называется nonSelectedText - person Carlos Martinez; 12.04.2016

arrow_upward
5
arrow_downward

используйте заполнитель данных

<select data-placeholder="Month">

Эта работа для меня.

person user674690    schedule 19.04.2016
comment
Кажется, он вообще не работает. Какую версию вы используете? - person mdrozdziel; 23.04.2016

arrow_upward
5
arrow_downward

Следуя официальной документации:

allSelectedText — это текст, отображаемый, если выбраны все параметры. Вы можете отключить отображение allSelectedText, установив для него значение false.

использовать опцию

{
...
allSelectedText: false,
...
}
person Ievgen Baziak    schedule 21.02.2017
comment
Давая ответ, желательно дать некоторое объяснение, ПОЧЕМУ именно ваш ответ. - person Stephen Rauch; 21.02.2017

arrow_upward
4
arrow_downward

Ответ Филипа сработал для меня, но, сделав его немного более полным, его следует вызвать, когда документ готов. Итак, решение для меня, включая настройку нескольких списков, было:

$(document).ready(function() {
    $("#bedrooms").multiselect({
        nonSelectedText:'Bedrooms'
    });
    $("#bathrooms").multiselect({
        nonSelectedText:'Bathrooms'
    });
    $("#garages").multiselect({
        nonSelectedText:'Garages'
    });
    $("#livingareas").multiselect({
        nonSelectedText:'Living Areas'
    });
});
person danlynn    schedule 27.10.2016

arrow_upward
1
arrow_downward

Я изменил идентификатор 3-й кнопки (подсказка о кнопке: множественный выбор с опцией "Выбрать все") на test. Это работает, но вам нужно сначала добавить идентификатор кнопки из инструментов разработчика (Chrome/Firefox добавить F12).

$('#test+ul>li').change(function(){
    $('#test').text($('#test').attr('title'));
});

Вы можете протестировать его после добавления идентификатора. Пожалуйста, используйте jsfiddle.net после этого. Вы можете найти помощь быстрее.

person mithataydogmus    schedule 25.09.2013