javascript 下拉选择中的搜索功能不起作用(选择2个插件)

dl5txlt9 于 2022-12-28 发布在 Java

关注(0)|答案(2)|浏览(269)

我试图通过使用select 2插件激活下拉列表中的搜索功能，但不幸的是，该插件根本不起作用
选择选项工作正常，但搜索不工作（选择2插件）html代码：'

<div class="table-responsive">
                    <table style="text-align:center;" id="dynamicAddRemove">
                      <tr style="background-color:#007398;color:white;text-align:center;">
                        <th class="wd-15p fontColor">الحساب</th>
                        <th class="wd-15p fontColor">مدين</th>
                        <th class="wd-15p fontColor">دائن</th>
                        <th class="wd-15p fontColor">وصف</th>
                        <th class="wd-10p fontColor"></th>
                      </tr>
                      <tr>
                      <td class="td">
                        <select class="form-control select_acount js-example-basic-single" name="account[]"required>
                            <option value="1">--1--</option>
                            <option value="2">--2--</option>
                            <option value="3">--3--</option>
                            <option value="4">--4--</option>
                            <option value="5">--5--</option>
                            <option value="6">--6--</option>
                            </select>
                          </td>
                        <td class="td"><input type="number" name="debtor[]" id="fname"class="form-control debtor arabicNumbers" onkeydown="return event.keyCode !== 69" required></td>
                        <td class="td"><input type="number" name="creditor[]" id="james" class="form-control creditor arabicNumbers" onkeydown="return event.keyCode !== 69" required></td>
                        <td class="td"><input type="text"  name="description[]" class="form-control"  required></td>
                        <td> <input type="text" name="mount[]" class="form-control mount"   required> </td>
                        <td class="td2"><button type="button" name="add" id="add-btn" class="btn btn-success"><i class="fas fa-plus"></i></button></td>
                      </tr>
                    </table>

第一个月

<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></script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

JavaScript

来源：https://stackoverflow.com/questions/74922220/the-search-feature-in-the-dropdown-select-does-not-work-select-2-plugin

2条答案

按热度按时间

wj8zmpe11#

看起来Jquery的库是罪魁祸首;
请参见此处的工作示例：https://jsfiddle.net/2g9u7snw/1/

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script></script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

在select2.min.js之上添加Jquery的库并给予一下;如果需要的话，小提琴会显示一个代码的工作示例。

赞(0）回复(0）举报 2022-12-28

jdg4fx2g2#

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script></script>
<script>
  $(document).ready(function() {
    $('.js-example-basic-single').select2();
});
</script>

赞(0）回复(0）举报 2022-12-28

我来回答

javascript 下拉选择中的搜索功能不起作用(选择2个插件)

2条答案

相关问题

热门标签

最新问答