More jQuery Fun – Auto Populating a Select Box

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. 
<select>
<option value="1">One</option>
<option value="2">Two</option>
</select>

//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!
Share and Enjoy:
  • email
  • Print
  • PDF
  • Twitter
  • Digg
  • Facebook
  • MySpace
  • del.icio.us
  • Google Bookmarks
  • StumbleUpon
  • Slashdot
  • Technorati
  • LinkedIn

Tags: ,

Thursday, October 15th, 2009 JavaScript, Programming, Quick Tips, jQuery

3 Comments to More jQuery Fun – Auto Populating a Select Box

  • Aknosis says:
    October 30, 2009 at 11:58 pm

    To sidestep my $(selector)[0].length = 0 to empty the select you can also do $(selector).empty();

  • zkilz says:
    December 15, 2009 at 8:52 am

    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.

  • Aknosis says:
    December 16, 2009 at 12:13 am

    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)

    • Leave a Reply

    Google Ads

    Twitter Feed...

    Powered by Twitter Tools