Bootstrap Multiselect - при использовании плагина для одиночного выбора всегда выбирается первый элемент

Question

Я использую плагин Bootstrap Multiselect, чтобы выбрать значения из раскрывающегося списка с множественным выбором и одиночного выбора

Я заметил пару проблем и попробовал несколько вариантов, но ни один из них не работал. Если кто-то уже решил их, нужен совет.

1. При использовании плагина для одиночного выбора мой первый элемент всегда выбран
2. Невозможно изменить текст nonSelectedText для одного раскрывающегося списка.

JsFiddle

HTML

<select class="multiselect">
<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>

Javascript

$(function() {
$('.multiselect').multiselect({
        nonSelectedText: 'Check an option!'
    });
});

CSS

.multiselect-container input[type=radio] {
   display: none;
}

Answer 1

Временное решение:

HTML:

<form>

  <input type="text" placeholder="Name...">

  <select class="multiselect" size="2">
    <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>

  <button type="reset">
    Reset
  </button>

</form>

JS:

$('.multiselect').multiselect({
    nonSelectedText: 'Choose an option!'
});
$('[type="reset"]').click(function () {
    $('.multiselect-selected-text').attr('title', 'Choose an option!').html('Choose an option!');
    $('.multiselect-container li').removeClass('active');
});

JSFIDDLE

Answer 2

Я не уверен, откуда вы возвращаете свои данные. Но где бы вы ни делали вызов ajax или возвращали Json или просто писали HTML <li> или же<option> предметы в Bootstrap Multiselect, .multiselect('refresh') не даст вам того, что вы ожидаете. Он просто добавляет новые списки снова и снова прямо под вашими текущими списками.

Для вашего Q1: вы можете добавить новый список, как "Пожалуйста, выберите" в качестве первого списка в этом раскрывающемся списке. Например:

$("#dropdownID").append("<option value=''>Please Select</option>");

Это должно быть написано перед другими реальными списками, которые будут сгенерированы, чтобы отображаться в верхней части вашего списка и обрабатывать bootstrap.multiselect, чтобы выбрать этот по умолчанию. Или, если вы используете вызов JSON или Ajax, после обратного вызова данных вы можете дать object как ниже:

var firstSelection = {id:'', name:'Please Select'};

И поместите этот объект в начало ваших списков с помощью.unshift():

yourJsondata.unshift(firstSelection);

Для вашего Q3: я пишу $('#dropdownID').multiselect('destroy'); в верхней части функций (вы можете иметь $("id").change(function(){}); или же $("id").click(function(){}); или любую функцию, в которую вы положили свой мультиселект). Так что каждый раз, когда я запускаю этот выпадающий список, он очищает все вещи, которые были внутри ранее. Но имейте в виду, что bootstrap.multiselect манипулирует вашими исходными списками выбора (при условии, что вы используете <select id='dropdownID'><option>...</option><select>) в свой собственный выпадающий формат (<div><button><span><ul><li>). Поэтому каждый раз, когда вы инициируете новые списки, вы должны писать empty() и destory() вместе. Пример ниже:

$('#dropdownID').empty(); $('#dropdownID').multiselect('destroy');

Надеюсь, это поможет вам немного.

Answer 3

Простой способ очистить одиночный выбор (с помощью множественного выбора начальной загрузки) - textHint волшебным образом начал работать, когда я закодировал его с помощью обычного экземпляра:

          $("#ddl_Id").val('');
    $('#ddl_Id').multiselect('refresh');

Также для тех, кто не знает, как сделать множественный выбор одним выбором, ответ находится в объявлении HTML:

<select id="ddl_Id" multiple="multiple" class="col dropdown" size="5">

Если вы не включите в свой HTML тег multiple, он будет автоматически выбран по одному.