laravel Select2无法在引导模式下工作

ilmyapht 于 2023-03-19 发布在其他

关注(0)|答案(1)|浏览(154)

我尝试在引导模式中使用select2，代码如下：
超文本：

<div class="modal" id="modalTambahData" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Data Untuk Manajemen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="tambahForm">
                    <div class="form-group">
                        <label for="recipient-code" class="col-form-label">Kode: </label>
                        <input type="text" class="form-control" id="recipient-code" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Nama:</label>
                        <input type="text" class="form-control" id="recipient-name" required>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Unit:</label>
                        <select class="form-select" id="selectUnit" data-placeholder="Pilih Unit">
                            @foreach ($data['availableUnit'] as $availableUnit)
                                <option value="{{ $availableUnit['id'] }}">{{ $availableUnit['name'] }}</option>
                            @endforeach
                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btnConfirm" form="tambahForm">Tambah data</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batalkan</button>
            </div>
        </div>
    </div>
</div>

然后我加了一个脚本：

var selectUnit = $('#selectUnit');
        selectUnit.select2({
            theme: "bootstrap-5",
            placeholder: selectUnit.data('placeholder'),
            dropdownParent: selectUnit.parent()
        });

但select2不起作用

我已经尝试了dropdownParent，也初始化了select2，当模态显示，但它也不工作，任何想法？

laravel

来源：https://stackoverflow.com/questions/75715910/select2-is-not-working-on-bootstrap-modal

1条答案

按热度按时间

xqkwcwgp1#

尝试替换“dropdownParent：选择带有=〉下拉菜单的Unit.parent（）“父代：$（'#modalTambah数据'）
下面是代码：

$(document).ready(function() {
        var selectUnit = $('#selectUnit');
            selectUnit.select2({
                theme: "bootstrap-5",
                selectionCssClass: "select2--small",
                placeholder: selectUnit.data('placeholder'),
                dropdownParent: $('#modalTambahData')
            });
    });

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" />
</head>


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalTambahData">
  Launch static backdrop modal
</button>

<!-- Modal -->
<div class="modal" id="modalTambahData" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Tambah Data Untuk Manajemen</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="tambahForm">
                    <div class="form-group">
                        <label for="recipient-code" class="col-form-label">Kode: </label>
                        <input type="text" class="form-control" id="recipient-code" required>
                    </div>
                    <div class="form-group">
                        <label for="recipient-name" class="col-form-label">Nama:</label>
                        <input type="text" class="form-control" id="recipient-name" required>
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Unit:</label>
                        <select class="form-select" id="selectUnit" data-placeholder="Pilih Unit">
                            <option>Opcao 1</option>
                            <option>Opcao 2</option>
                            <option>Opcao 3</option>
                            <option>Opcao 4</option>

                        </select>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary btnConfirm" form="tambahForm">Tambah data</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batalkan</button>
            </div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-03-19

我来回答

laravel Select2无法在引导模式下工作

1条答案

相关问题

热门标签

最新问答