Question

当用户采取某项操作时，我会在网页中动态添加select个元素。问题是，当动态添加select元素时，jquery无法使它们可搜索，因为它在文档加载时应用。如何使可动态添加的选择框可搜索？

修改

我使用select bootstrap来搜索select元素。

我正在做的是让用户使用select areas选择图像的多个部分，每当选择一个区域时，我添加一个与该区域对应的选择元素。这是使用页面顶部的自定义JavaScript完成的。但是，这些选择元素没有任何样式，因为它们是动态添加的。

选择引导程序可以使用data-live-search -

使选择元素可搜索

<select data-live-search="true" name="category_name" class="selectpicker" >

Answer 1

您可以使用Chosen之类的插件。它非常易于使用，只需包含文件并按如下方式调用：

$(".my-select").chosen();

如果您想动态添加选项，可以查看此answer，其中说明了如何执行此操作。

Answer 2

即使您动态绑定它们，也可以使用选择器搜索元素：

$('option').each(function(){console.log($(this).html())});

$('select').append('<option class="option2">test 2</option>');

$('option').each(function(){console.log($(this).html())});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
  <option class="option1">test</option>
</select>

选择框可搜索的html

2 个答案: