主页 / 问题 / 1564289
Accepted
Дмитрий
Asked:2024-02-01 20:33:26 +0000 UTC2024-02-01 20:33:26 +0000 UTC

JS select2 填充控制

  • 772

在项目中我使用select2库（https://select2.org/），有两个任务：

  1. 逐个字符跟踪用户输入 (js-example-basic-single)
  2. 根据输入的数据（步骤1），更新选项列表（根据对在线服务的请求，这部分已经在项目中实现）

select2中的哪个事件监听字符输入（类似于addEventListener('input')）。如何动态添加新值到select2

javascript

1 个回答

  1. Best Answer

    如果我理解正确的话，这就是你需要的

            $('.js-example-basic-multiple').select2();
        $(".js-example-basic-multiple").on("select2:open", function() {
            $(".select2-search__field").on("input", function(e) {
              let value = e.target.value;
              console.log("Ввод пользователя:", value);
            });
        });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    <select class="js-example-basic-multiple" name="states[]" multiple="multiple">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>

    UPD：您也可以在关闭时添加

    $(".js-example-basic-multiple").on("select2:close", function () {
  $(".select2-search__field").off("input");
});

    关于数组 - 如果没有具体的示例和更详细的解释，很难实现

    const someArr = ['I', 'love', 'JS'];

$('.js-example-basic-multiple').select2({
    tags: true
});

$(".js-example-basic-multiple").on("select2:open", function () {
    $(".select2-search__field").on("input", function (e) {
        let value = e.target.value;
        console.log("Ввод пользователя:", value);

        if (value.toLowerCase() === 'gogi') {
            $('.js-example-basic-multiple').empty().select2({
                data: someArr
            });
        }
    });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

    <select class="js-example-basic-multiple" name="states[]" multiple="multiple" style="width: 100%;">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
     </select>

    1. 当您输入单词 gogi 时，会加载 someArr 数组中的值；
    2. .empty() - 在这里我们清除该值；
    3. .select2({data: someArr}) 这里我们添加新的；

    我希望我正确理解了你

    • 1

相关问题