Problem: You want to dynamically populate a select box and you don't know how.
Solution: Easy, I will show you.
First off, I lied there is no built in way in jQuery (why?, I don't know) to automatically populate a select box. But it actually is very easy. There are plenty of methods to accomplish this but I like to do it this was because utilizes the Option object and it doesn't require html string concatenation.
The basics
Example 1:
Here is the code for the onlick event of that button:
var s = $('#sel1')[0]; //Select the select box
s.length = 0; //empty out the select box
for(var i = 0;i<10;i++){
var op = new Option('Option '+i, i); //Create "Option i" with a value of i
s[i] = op; //Add "Option i" at index i
}
//Here is code for the reset button
$('#sel1')[0].length = 0; //Empty It
$('#sel1')[0][0] = new Option('Empty', ''); //Add the 'Empty' option
More Dynamic
In this example I will populate the 2nd select box based on the value of the first one.
Example 2:
This time when I change something in the first sel, it does the changing of the second select box.
var val = $(this).val(); //Determine what I changed the first select to
var s = $('#sel2b')[0];
s.length = 0; //Clear the second select
s[0] = new Option('Select 1 Was '+val, val); //Set the first option to "Select 1 Was (the selected value)"
What now?
There are many paths you can go down to make your select boxes dynamic, whether that is auto populating them, adding or removing single values, making them submit forms, submitting ajax calls to populate etc. etc. The key to making your life easier is to understand the way the select element is handled. Think of it as an array of objects (which it is), at each index is an option and each option has text and a value.
//Create a select element
var select = document.createElement('select');
//Remember that Array indexes start at 0
select[0] = new Option(); //Create a blank option
select[0].value = 1;
select[0].text = 'One';
select[1] = new Option(); //Create another blank option
select[1].value = 2;
select[1].text = 'Two'
$(select).css('border','1px solid red'); //Make it easier to see which one is dynamic
$('#last').after(select); //Add this dynamic select box after the html one
Need help implementing a specific example? Just ask in a comment!
Hi!
Nice website. Im trying to create a dynamically select form that adds options from different variables automatically every 3 second. This will constantly go in a loop.
Is this something i can use to do that?
Do you know if there is any way to save the options so it doesn’t go blank on reload of the page?
1. Setup your function that adds the options
2. Set the interval to call that function every 3 seconds
There is no real way to save the options other than a cookie, you could also look into some sort of hash magic but that becomes difficult to work cross browser (see jquery history plugin).
I also can’t seemt to find an easy way to serialize the options into text for storage in a cookie, so you probably would want to append to your cookie as you add each item. You will want to use common functions to turn your Objects in JSON and vice versca, (search for toJson).
So you really want something like this:
function updateOptions(){
//This would be your dynamic call, probably ajax request
var newOption = new Option('name', 'value');
var s = $('#select')[0];
var l = s.length;
s[l] = newOption;
//some predefined method to get the cookie
//and convert it back into an object
var cookie = eval('('+getCookie('optionSvr')+')');
//add new option
cookie.push(newOption);
setCookie('optionSvr',toJSON(cookie));
}
//Run every 3 seconds
setInterval('updateOptions()',3000);
To sidestep my $(selector)[0].length = 0 to empty the select you can also do $(selector).empty();
Hi!
Nice website. Im trying to create a dynamically select form that adds options from different variables automatically every 3 second. This will constantly go in a loop.
Is this something i can use to do that?
Do you know if there is any way to save the options so it doesn’t go blank on reload of the page?
Thank you any answer.
Thanks.
It wouldn’t be to difficult to do.
1. Setup your function that adds the options
2. Set the interval to call that function every 3 seconds
There is no real way to save the options other than a cookie, you could also look into some sort of hash magic but that becomes difficult to work cross browser (see jquery history plugin).
I also can’t seemt to find an easy way to serialize the options into text for storage in a cookie, so you probably would want to append to your cookie as you add each item. You will want to use common functions to turn your Objects in JSON and vice versca, (search for toJson).
So you really want something like this:
function updateOptions(){ //This would be your dynamic call, probably ajax request var newOption = new Option('name', 'value'); var s = $('#select')[0]; var l = s.length; s[l] = newOption; //some predefined method to get the cookie //and convert it back into an object var cookie = eval('('+getCookie('optionSvr')+')'); //add new option cookie.push(newOption); setCookie('optionSvr',toJSON(cookie)); } //Run every 3 seconds setInterval('updateOptions()',3000);Example (minus the cookie stuff)