Question

HTML如下： -

<select name="companyName"  id="ddlCompanyId" name="companyList" multiple="multiple" ></select>

我正在使用bootstrap-multiple.js并且有条件地想要使用单选而不使用单选按钮。

提前谢谢！

Answer 1

要删除/隐藏单选按钮，您可以在css中添加新样式，或者您可以使用以下事件：

onDropdownShown：显示下拉列表后调用的回调。

要从多个选项更改为单个选择，只需切换html属性 multiple =“multiple”，rebuild插件即可。

来自评论：

以及如何使用bootstrap multiselect清除单选下拉列表中的选择？

multiple：....使用插件进行单项选择（不存在多个属性），如果事先未选择其他选项，将自动选择第一个选项。

这意味着：您需要使用带有空字符串的jQuery .val()来取消选择每个选项。

$('#ddlCompanyId').multiselect({
    onDropdownShown: function(e) {
        if (this.options.multiple == false) {
            this.$container.find(':radio').hide();
        }
    }
});

$('#btnToggle').on('click', function(e) {
    $('#ddlCompanyId').attr('multiple', function(idx, attr) {
        return (attr==undefined) ? 'multiple' : null;
    });
    // deselect ...
    $('#ddlCompanyId').val('');
    // rebuild the whole dropdown...
    $('#ddlCompanyId').multiselect('rebuild');
});


$('#btnToggleDisable').on('click', function(e) {
    if ($('#ddlCompanyId').is(':disabled')) {
        $('#ddlCompanyId').multiselect('enable');
    } else {
        $('#ddlCompanyId').multiselect('disable');
    }
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>



<div class="container">
    <div class="row">
        <select id="ddlCompanyId" 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>
        <button class="btn btn-primary" type="button" id="btnToggle">Toggle Multiselect</button>
        <button class="btn btn-primary" type="button" id="btnToggleDisable">Toggle disable</button>
    </div>
</div>

如何自定义/转换bootstrap multiselect到单选有条件无单选按钮

1 个答案: