引导多选不起作用

问题描述 投票：0回答：7

我正在尝试使用多选Bootstrap，我使用了以下代码，该代码也可以在他们的网站（http://davidstutz.github.io/bootstrap-multiselect/）中找到，它显示了多选按钮选择，因为我已经选择了“奶酪和意大利辣香肠”选项，所以它也已经选择了它们，但是每当我单击它时，它都不会打开可供选择的列表！ 

<!-- Include the plugin's CSS and JS: -->
<script src="http://code.jquery.com/jquery.js"></script>    
<script type="text/javascript" src="<?php echo base_url('bootstrap/js/bootstrap-multiselect.js'); ?>"></script>

<link href="<?php echo base_url('bootstrap/css/bootstrap-multiselect.css'); ?>" rel="stylesheet" type="text/css">    
<link href="<?php echo base_url('bootstrap/css/bootstrap.min.css'); ?>" rel="stylesheet" type="text/css">                  
<script type="text/javascript" src="<?php echo base_url('bootstrap/js/bootstrap.min.js'); ?>"></script>    

<!-- Build your select: -->
<select class="multiselect" multiple="multiple" name="my-select[]" id="my-select">
    <option value="cheese" selected>Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni" selected>Pepperoni</option>
    <option value="onions">Onions</option>
</select>

<script type="text/javascript">
    $(document).ready(function() {     
            $('.multiselect').multiselect();      
    });
</script>

我错过了什么吗？

如果您认为我的问题不清楚，请让我知道您需要进一步澄清哪一部分。

提前非常感谢。

twitter-bootstrap twitter-bootstrap-3 multi-select
7个回答
16
投票

尝试添加 bootstrap.js 文件 (http://getbootstrap.com/javascript/)。我错过了这些，看来这些是必需的。

2
投票

这可以解决您的问题。有时 jsfiddle.net 无法正常工作。

因此，请制作一个 html 文件并将以下行复制到其中。它会对你有用。

<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
        rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
        rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('#lstFruits').multiselect({
                includeSelectAllOption: true
            });
           
        });
    </script>
    <select id="lstFruits" multiple="multiple">
       <option value="cheese" selected>Cheese</option>
        <option value="tomatoes">Tomatoes</option>
        <option value="mozarella">Mozzarella</option>
        <option value="mushrooms" selected>Mushrooms</option>
        <option value="pepperoni" selected>Pepperoni</option>
        <option value="onions">Onions</option>
    </select>  
</body>

如有任何问题请分享。

1
投票
Try this: Add this where build your select is...
           <div class="input-group btn-group">
                <span class="input-group-addon"><b class="glyphicon glyphicon-list-alt"></b></span>
                <select id="example6" multiple="multiple" style="display: none;">
                <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>

                <div class="btn-group">
                <button type="button" class="multiselect dropdown-toggle btn" data-toggle="dropdown" title="None selected" style="width: auto;">None selected <b class="caret"></b></button>
                <ul class="multiselect-container dropdown-menu">
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="cheese"> Cheese</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="tomatoes"> Tomatoes</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="mozarella"> Mozzarella</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="mushrooms"> Mushrooms</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="pepperoni"> Pepperoni</label></a></li>
                <li><a href="javascript:void(0);"><label class="checkbox"><input type="checkbox" value="onions"> Onions</label></a></li></ul>
                </div>
                </div>
1
投票

我对插件和 Internet Explorer 版本也遇到了同样的问题 <= 10.

我还通过在网页开头添加 DOCTYPE 标签来解决此问题。这个发现非常烦人，因为 IE 坚持使用 XHTML。

请验证您的网页是否以以下行开头：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

希望有帮助。

1
投票

在 IE8 上我遇到了问题。当我更改 bootstarp-multiselect.js 第 223 行时

this.$select.wrap('<span class="hide-native-select">').after(this.$container);

到

this.$select.wrap('<span class="hide-native-select"></span>').after(this.$container);

以及1468号线

'class': option.class, to  'class': option['class'],

成功了

0
投票

检查控制台中是否有任何错误。对我来说这是

" Uncaught Error: Bootstrap dropdown require Popper.js"
。

<scriptsrc = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>

在 bootstrap.min.js 问题解决后添加此行。

0
投票

仍然是 2024 年，选择多个仍然不起作用。我正在使用 N¡Blazor 和 .Net core 8。我必须从头开始制作一个，并分享给任何有同样问题的人。

<div class="dropdown">
    <button class="dropdown-toggle mr-4" data-toggle="dropdown" type="button" @onclick="() => show = !show "
    aria-haspopup="true" aria-expanded="false">
        @Tip
    </button>
    @if (ListLabels != null){
        <div class="dropdown-menu @(show? "show":"")">
            <div class="form-group row">
                @for (int i = 0; i < ListLabels.Length; i++){
                    <div class="@GetCol(NumCols)">
                        <label class="form-check-label">
                            <input class="form-check-input"
                            type="checkbox"
                            checked="@list_values[i]"
                            @bind-value="list_values[i]">
                            @ListLabels[i]
                        </label>
                    </div>
                }
            </div>
        </div>
    }
</div>

@code 
{
    [Parameter]
    public string Tip { get; set; } = string.Empty;

    [Parameter]
    public int NumCols { get; set; } = 1;

    [Parameter]
    public string[] ListLabels { get; set; }

    bool[] list_values = null;
    [Parameter]
    public bool[] ListValues
    {
        get => list_values;
        set
        {
            list_values = value;
        }
    }

    bool show = false;

    string GetCol(int value)
    {
        switch (value){
            case 1: return "col-12";
            case 2: return "col-6";
            case 3: return "col-4";
            case 4: return "col-3";
            case 6: return "col-2";
            case 12: return "col-1";
            default: return "col-12";
        }
    }

    protected override void OnParametersSet()
    {
        if (ListLabels != null){
            if (list_values == null || list_values.Length != ListLabels.Length){
                list_values = new bool[ListLabels.Length];
            }
        }
    }
}

使用方法非常简单

<InputMultiSelector ListLabels="list_labels" ListValues="list_checks" Tip="Choose your pizza" NumCols="3"/>
@code 
{
    bool[] list_checks = new bool[6] { false, true, true, false, false, true };
    string[] list_labels = new string[6] { "cheese", "tomatoes", "mozarella", "mushrooms", "pepperoni", "onions" };
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.