Making select box searchable html

Question

I am dynamically adding select elements in the webpage when a certain action is taken by the user. The problem is that as the select elements are added dynamically, the jquery is unable to make them searchable as it is applied when the document is loaded. How can I make the dynamically added select boxes searchable?

EDIT

I'm using select bootstrap for making the select element searchable.

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. This is done using a custom javascript in the head of the page. However, these select elements are devoid of any styling as the are added dynamically.

The select bootstrap can make a select element searchable by using data-live-search -

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

What do you mean searchable? You mean found by selectors? Ideally, pPost some code. — Mitya, Jun 27 '16 at 10:29
What jQuery code? Are we supposed to guess? I can however guess you need a *delegated event handler* to cover this situation :) — iCollect.it Ltd, Jun 27 '16 at 10:29
You haveN'T shared your codebase. We don't know, what issue you are facing. If you are looking for a library, then try Select2 plugin https://select2.github.io/examples.html — Deepak Yadav, Jun 27 '16 at 10:31

score 0 · Answer 1 · edited May 23 '17 at 11:44

0

You can use a plugin like Chosen. It is very easy to use, just include the files and call it like this:

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

And if you want to add options dynamically, you can take a look at this answer, which explains how to do it.

edited May 23 '17 at 11:44

Community

1
1

answered Jun 27 '16 at 10:30

Iván Rodríguez Torres

4,293
3
31
47

score 0 · Answer 2 · answered Jun 27 '16 at 10:31

0

You can search for the elements with a selector, even if you bind them dynamically:

$('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>

answered Jun 27 '16 at 10:31

Randy

9,419
5
39
56

I have tried it but it doesn't seem to work. I have edited the question, please have a look. – Keshav Agarwal Jun 27 '16 at 10:45

Making select box searchable html

2 Answers2