Making select box searchable html - javascript

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" >

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.

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>

Related

jQuery UI Populate Select Menu from the Database

So I have these two jQuery select menus and and based on what is selected in one menu, an ajax call is made to get data for the next select menu. I believe I will have to iterate over data and list items to populate the html for the second select when the 'selectmenu' event of the first select is triggered. I've been looking at the structure of the select menu and I see the div's at the bottom of the page for both selects are like.
<div class="ui-selectmenu-menu ui-front"></div>
Ofcourse one that has options shows populated li tags whereas the other one only shows one empty li item.
My questions is that once I iterate and create the html markup for second select. How do I know which div to append that in? Both have the same classes on the outermost container (Div): ui-selectmenu-menu ui-front
Thank you!
So guess I did not have to worry about those Divs. All I needed was to populate the options for the select menu and then call this
$('#city).html(cityOptions);
Where cityOptions is a string of tags I generated. By initializing .selectmenu method and then refreshing, the relative Div at the bottom of the page get's updated automatically with all the options and no need to worry about updating it.
$('#city').selectmenu().selectmenu('refresh', true);
You can use selectpicker for your tasks.
<select id="city_pickter" class="form-control selectpicker" multiple data-live-search="true">
it allows live searching
multiple select
easy to use
i suppose you are getting the ids of each city through jquery.
// defining array of cities.
var current_cities = [];
// populating cities array
for(var i = 0; i < data.response.cities.length; i++){
current_cities.push(Number(data.response.cities[i].city_id));
}
$('#city_picker').selectpicker('val', current_cities);
if you want to deselect everything. you can use
$('#city_picker').selectpicker('val', '[]');
JavaScript and CSS file required for the above code to work are
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>

add id to select2 input text

is it possible to add an id to the input type text that select2 is generating? to explain what i want, i have to make a filter based on cities, since there are too many cities, i cant load them all at once, so i made an autocomplete, but the user can choose more cities, so i thought about an autocomplete with select2, i tried using the class, like this
$('.select2-search__field').on('keyup', function(e) {
console.log($(this).val());
});
The problem is, i have more select2 on my page (one with some codes, one with some regions etc.), and i would do useless ajax requests for each of them
Let's think outside the box. You might not have to put an ID on a Select2 instance.
You need to somehow differentiate between different instances of Select2. Maybe an easier approach, which you're already familiar with, would be to wrap them in a div which has an ID:
<div id=first>
<!-- one select2 -->
</div>
<div id=second>
<!-- the other select2-->
</div>
You can now access different ones based on the ID of the wrapper.
$('#first .select2-search__field')

Multi select jQuery-Dropdown plugin

I use this plugin.
http://dane.one/projects/jquery-dropdown/demo/#multi-select
https://github.com/daneWilliams/jquery.dropdown
I want use multiple select
$('select').dropdown({
multi: true
});
It's working normal, but initially, when the page was loaded if I have selected options
<select multiple>
<option>Option 1</option>
<option selected>Option 2</option>
<option>Option 3</option>
</select>
And I want add some selected options,
This plugin resets all selected, and I then seleced
And then chooses a new options without first selected.
I'm not sure if I understood you correctly, but, it looks like the option is selected, it just doesn't look selected?
Here's a CodePen with three examples: http://codepen.io/anon/pen/mWWWaO
The first one is an example of what you have, the option is selected by adding the selected attribute in the code. It is selected, and when you select other options, it stays, but it is not highlighted like the other ones.
The second example is just an example of what it is like with nothing selected, this was more for my own reference and testing.
The third one is a menu with no options set as selected, but instead, after the plugin is initialized it triggers a click event on the option you want selected.
A quick look at the plugin and it didn't look like there was a way to initialize it with options already selected and it also looks like there is no way to select an option programmatically through the plugin.
The plugin replaces the original menu with it's own code in order to create the menu and it looks like an option can't look selected unless it is clicked on, as opposed to the actual, hidden, menu being updated within the code.
I included the plugin JS in the CodePen, but not here. You can scroll to the bottom there to see the example JS code. You would probably want to set up a better way to mark those items as selected than the quick example I set up, but that's the general idea.
$('select').dropdown({
multi: true
});
// Select the third dropdown list and then find the second li in that list
$('.dropdown-list').eq(2).find('li').eq(1).trigger('click');
Use select2 instead. Its an awesome jQuery plugin both for longlist single value selects & multiple selects.

Show/hide div for selected options

I have three dropdown select boxes. Each contains a different set of demographic attributes. I'd like to display a score corresponding to whatever combination of selections is made by a user. For example, if a user selects Male, 18-24, Asian-American, I want to hide the current div and display the div corresponding to that combination.
I have seen answers for how to do this with just one select box, but since I have three and there are significantly more combinations, I wanted to see if there was a simple way to do this efficiently. I can provide specific code if needed, though a general example of how to do this would be just fine as well - thanks!
Keeping hidden divs for all possible combinations is not a good idea. That will make your page size bigger. Why don't you get only the relevant information as needed using ajax and show it ?
In your page, keep only one div to show the information
<select id="Age">
<option value='1'>18-24</option>
<option value='2'>25-50</option>
</select>
<select id="Place">
<option value='1'>Asia</option>
<option value='2'>America</option>
</select>
<div id="info"></div>
Now listen to the change event of the dropdowns, get the selected value of dropdowns and make an an ajax call to the server page and get the markup to show to user. In the below script, I am using jquery load method to load the new markup in the info div.
$(function(){
$("#Age,#Place").change(function(e){
var age=$("#Age").val();
var place=$("#Place").val();
$("#info").load("yourServerPage.php?age="+age+"&place="+place);
});
});
Assuming you have a server page called yourServerPage.php which accepts the age and place from the querystring and return the markup for the information div.

how to add image to dropdown using javascript in jsp

I am setting name of few countries List in Session Object. I need to populate a dropdown in my JSP using this List and also add the Flag Images before each country name in the select option dynamically.
The below code does not work:
<select id="refSelect" onChange="refreshRefList();" name='refSelect'>
<c:forEach var='flag' items="${sessionScope.flagList}">
<option value="${flag}">
<img src="./images/${flag}.PNG"/> <c:out value="${flag}" />
</option>
</c:forEach>
</select>
I also tried to achieve this using CSS using below link but it failed for session List and only works in Firefox browser:
How to add a images in select list
Seems like normal default Dropdown control does not support images. Can anyone help me to achieve this using Javascript/CSS/Custom taglib. I don't want to use jQuery in my codes.
Add a textbox,
create a
<ul id="country_dropdown"><li><img src="urimage.png"/>Country</li>...</ul>
on focus on the textbox, show country_dropdown, on blur or on click on li hide the ul.
no jquery needed to achieve that.
also the use div instead of textbox and maintain the value as hidden.
You may try JavaScript image combobox
Hope this helps.

Categories

Resources