使选择框可搜索 html答案

【问题标题】：Making select box searchable html使选择框可搜索 html
【发布时间】：2016-06-27 10:27:26
【问题描述】：

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

编辑

我使用select bootstrap 使选择元素可搜索。

What I am doing is making the user select multiple parts of an image using select areas and whenever an area is selected, I add a select element corresponding to that area.这是使用页面头部的自定义 javascript 完成的。但是，这些选择元素没有任何样式，因为它们是动态添加的。

选择引导程序可以通过使用data-live-search 使选择元素可搜索-

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

【问题讨论】：

可搜索是什么意思？你的意思是通过选择器找到的？理想情况下，pPost 一些代码。
什么jQuery代码？我们应该猜测吗？不过我猜你需要一个委托事件处理程序来处理这种情况:)
您当前的搜索效果如何？
你还没有分享你的代码库。我们不知道，您面临什么问题。如果您正在寻找库，请尝试 Select2 插件 select2.github.io/examples.html
我已经编辑了问题，请看一下。

标签： javascript jquery html css

【解决方案1】：

您可以使用像Chosen 这样的插件。它非常易于使用，只需包含文件并像这样调用它：

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

如果你想动态添加选项，你可以看看这个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>

【讨论】：

我已经尝试过了，但它似乎不起作用。我已经编辑了问题，请看一下。