首页 > 解决方案 > Select2 在引导模式下不起作用

问题描述

我读了这个问题,但我没有从那里得到任何解决方案。

我的 Bootstrap 模态 HTML 如下所示

<div class="modal fade" id="modelId" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">                
            <div class="modal-body">
                <div class="container-fluid">
                    <form role="form" action="task">
                        <div class="row">
                            <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
                                <option value="example1">example1</option>
                                <option value="example2">example2</option>
                                <option value="example3">example3</option>
                                <option value="example4">example4</option>
                                <option value="example5">example5</option>
                                <option value="example6">example6</option>
                            </select>

我使用下面的代码添加了 select2 的 CSS 和 JS。

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.11/js/select2.min.js"></script>

我在我的 HTML 页面中使用下面的 JS 代码。

<script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2({
            placeholder: 'Select an option'
        });
    });
</script>

我正在使用下面的 jQuery 链接

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

但我得到如下输出

在此处输入图像描述

标签: javascriptjquery-uibootstrap-modaljquery-select2

解决方案


初始化 select2 时尝试以下代码:

  obj.select2({
 dropdownParent:obj.parent(), ///  HOLDER DIV - FOR Z-INDEX ISSUES   

推荐阅读