无需 JS 初始化的可搜索 select 输入

Question

我需要一个可搜索的select输入，不需要在JS中初始化。我在我的网站上使用 Ajax，所以你无法知道有多少 select 来了，在调用之前他们的 ID，所以一些 data-list 解决方案是可以的，但用户不应该发送类型输入，这应该像 select 输入一样工作，其中定义了一个 id 和一个标签，显示标签并发送 id。你能帮助我吗？我发现的唯一解决方案需要像这样的 JS 初始化：

$(".js-example-disabled").select2();

但是我们不知道 AJAX 调用之前的 ID，也不知道我们需要处理的 select 输入的数量。

Answer 1

您可以在 AJAX 调用的 success 处理程序中构建自己的 select 元素。然后当你将它添加到正文时用 .select2() 初始化它。这里唯一要考虑的是文档中的位置。

function dynamicSelect2(url, placement) {
  $.ajax({
    url: url,
    success: function(data) {
      var $select = $('<select></select>');
      $.each(data, function(i, item) {
        $select.append(`<option value="${item}">${item}</option>`);
      });
      $select.appendTo(placement);
      $select.select2();
    })
  });
}

我已将它包装在一个函数中，以便您可以动态更改数据端点和在正文中的位置。

dynamicSelect2('yourdata', document.body);

无需 JS 初始化的可搜索 select 输入

Searchable select input without JS initialization

javascript

ajax

jquery

jquery-select2