在 bootstrap-multiselect 中显示 select 所有复选框并自定义 "None Selected" 文本

Question

我正在寻找将 None selected 标签更改为自己的文本的解决方案。

我有这个代码， html:

<select id="mySelect" multiple="multiple">          
    <optgroup label="MODERN" value="MODERN">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>
<select id="mySelect2" multiple="multiple">         
    <optgroup label="TREND" value="TREND">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>

js:

$(function () {
    $('#mySelect').multiselect({
        enableClickableOptGroups: true
    });
    $('#mySelect2').multiselect({
        enableClickableOptGroups: true
    });
});

我想将 'None selected' 文本变成 MODERN，同时，我希望 select 全部选项包含在复选框中。

任何人都可以告诉我如何做到这一点？

Answer 1

你好如果你想select这个控件的所有复选框，那么你可以使用下面的代码。您可以使用 nonSelectedText 属性来更改 "None Selected" text

$(function () {
$('#mySelect').multiselect({
    enableClickableOptGroups: true,
    includeSelectAllOption:true,
    nonSelectedText: 'MODERN'
});
$('#mySelect2').multiselect({
    enableClickableOptGroups: true
    includeSelectAllOption:true
});

});

Answer 2

在你的HTML

<select id="mySelect" multiple="multiple">          
    <optgroup label="MODERN" value="MODERN" stat="0">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>
<select id="mySelect2" multiple="multiple">         
    <optgroup label="TREND" value="TREND" stat="0">
        <option value="paintings">FAMES</option>
        <option value="works on paper">WORKS</option>
        <option value="prints">LIFE</option>
        <option value="sculptures">TIME</option>
        <option value="design">DESIRE</option>
        <option value="photography">FUTURE</option>
    </optgroup>
</select>

在你的 JS 中

$(document).on('click','optgroup',function()
{
    if($(this).attr('stat') == "0")
    {
        $(this).children().attr("selected", "selected");
        $(this).attr('stat', "1");
    }
    else
    {
        $(this).children().attr("selected", false);
        $(this).attr('stat', "0");
    }
});

在 bootstrap-multiselect 中显示 select 所有复选框并自定义 "None Selected" 文本

Showing select all checkbox in bootstrap-multiselect and customize the "None Selected" Text

html

checkbox

jquery

multi-select

bootstrap-multiselect