jQuery UI Populate Select Menu from the Database - javascript

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>

Related

How to get selected values of all dynamically created multiple dropdowns using jquery

I have created dynamically row with drop-down list, i want to get all selected values from dropdowns of rows with JQuery. Please help me.
Since you haven't posed any code snippet, I'm just gonna wing it, assuming it's a standard <select>-box.
// Loop all parents and grab the value which is set by the browser whenever update occurs.
var values = [...document.querySelectorAll('select')].map(x =>x.value)

Making select box searchable html

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>

Using jquery to add options to select element within cloned table row causes select options outside the cloned element to be modified

I'm trying to use a table row as a template for adding multiple rows. I need to clone the row, then update the select elements with some data. I hide the table row template before I do the clone, so the selects should not show up for the time being.
The issue I'm having is that I have other selects defined on the page that are being modified by this process, but when I do the following:
clonedTr.find('select').each(function() {
console.log($(this));
...
it confirms that I am only working with the selects within the cloned table row. See this jsfiddle: https://jsfiddle.net/fud4wej2/2/
I also tried to call rowTemplate.remove() after the clone(), thinking that the issue might have to do with duplicated ids, but to no avail. Otherwise, to see the top pulldown being displayed correctly - showing Foobar as it's option - comment in the return; statement.
As is -- with $(this).append(option); commented out -- the top pulldown shows the second entry WB-730-2 from optionsToAdd as its option. If you comment in the final $(this).append(option); statement, the top pulldown has no options.
These lines:
var option = $('option');
option.val(optionsToAdd[i]);
option.text(optionsToAdd[i]);
The $('option') function is evaluating that CSS selector in the scope of the whole document, which grabs every option tag on the page. This is causing your problem.
To fix:
var option = $('<option>');
This will parse the HTML and create a new option element.
Another alternative:
var option = $(document.createElement("option"));

add div from drop down menu selection jquery

I am able to add a row with the dom but how can I get a div to display to the right of drop down depending on what is selected?
Here is an example of what I have so far: http://jsbin.com/#/afojid/1/edit
The first drop down is working correctly but the rest I would like to add when the button is clicked and I would like them to work the same way as the orginal drop down menu. So that if Asian is selected an add section will appear to the right, if Other is selected an other add section will appear to the right, and so on for each time the add button is clicked. I tried clone but I don't want anything to be selected when the add button is clicked
The fact that you're working with ids instead of classes more or less universally makes this very challenging. You should update your code to work with classes and appropriately clone the *Info tables when you create new dropdowns.
You're using an old version of jQuery, so .on is not available to you for delegation. Instead, use .delegate:
$(document).delegate('#typeofEthnicity,[id^=newDDMenu]', 'change', showEthnicity)
This will call the showEthnicity function for the original dropdown and any added dropdowns, but you also have to clone all of the *Info divs and put them in the appropriate spot in the table (I suppose the same spot as the appended row). If you use classes, then it's a simple matter of finding the dropdown's parent row and then locating the corresponding child with the appropriate class to be shown.

Linked drop down lists and load div

I'm kind of new when it comes to programming but am trying to learn.
What I need to do for my site is have 2 or 3 linked drop-down menus so when I select an item from the first one, the second one will refresh with other options. I have found a way to do this using Java but I cannot seem to make it with the refresh div part.
I looked up prototypejs/updater but it is a bit over my head and cannot seem to link it with the JavaScript I used for the drop-down menus...
So if anyone can tell how I can link two, maybe 3 drop-down menus and after if I click an option from the last menu make a div from the page refresh with other content please help :)
Try a search on google for dynamic select boxes, it's plenty of examples, choose the less complicated one that best fits with your knowledge.
The principle is to link a function to "onchange" event that the select box fires when an item is selected.
Assuming this select box:
<select id="select1" name="option">
</select>
the javascript fragment is:
var sel1 = document.getElementById("select1");
sel1.onchange = function() {
//do whatever you want
};
For the first and the second select, the function will load other select's options, while in the third case it will show your div
Not 100% sure what you are after - but I think this should get you at least some of the way:
http://remysharp.com/2007/09/18/auto-populate-multiple-select-boxes/
It's a jQuery plugin for linking select boxes together, using Ajax to load the data to populate the next box in the chain based on the value selected in the previous.
You'll then still need to link the last box with the div - but you should be able to do it with a similar method yourself - see the jQuery Ajax documentation.
http://docs.jquery.com/Ajax

Categories

Resources