Question

我正在使用Bootstrap Multiselect插件从多选下拉列表和单选下拉列表中选择值

我发现了几个问题并尝试了几个选项，但没有一个可行。如果有人已经解决了，需要建议。

当使用插件进行单选时，我的第一项始终被选中
无法更改单个下拉列表的nonSelectedText文本。

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>");

必须在要生成的其他Real列表之前编写，以便显示在列表顶部，并将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 声明中：

Bootstrap Multiselect - 使用插件进行单选，始终选择第一项

3 个答案:

的 JSFIDDLE