javascript to dynamically populate a dropdown list box

Question

I have a ruby on rails application.I have 2 drop down boxes.I have to populate the second drop down box based on the selection from the first one.

The html code is

-Releases = Release.all
  %table.grid.full
    %tr      
      %td.grid.full_panels{:style => "width: 40%"}
        Release:
      %td.grid.full_panels{:style => "width: 40%"}
        = select_tag "releases",options_from_collection_for_select(releases,"id","name",params[:releases]),:include_blank=>true
      %td.grid.full_panels{:style => "width: 40%"}
        Cycle:
      %td.grid.full_panels{:style => "width: 40%"}

Now i need the cycles drop down to be populated from releases.

Please help me with the jquery for this.

what is the type of the connection between the two dropdown lists? what are the conditions between them? — alonisser
– alonisser, Commented Oct 18, 2011 at 6:48
The connection is that one release caqn have multiple cycles. — ramya
– ramya, Commented Oct 18, 2011 at 6:50

gion_13 · Accepted Answer · 2011-10-18 07:19:23Z

7

Basically you should add an event handler that will be triggered when the first drop-down is being changed that populates the second one based on the first one's selected option :

$('select#first').change(function(e){
    var newOptions = getNewOptions($(this).val());
    $('select#second').html('');   // clear the existing options
    $.each(newOptions,function(i,o){
        $('<option>' + o + '</option>').appendTo('select#second');
    });            
});

function getNewOptions(val){
    if (val == 1)
        return ['a','b','c'];
    if(val == 2)
        return [1,2,3,4];
    return ['a1','a2','a3'];
}

And of course, your html markup is something like :

<select id="first">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>

<select id="second">
</select>

Here's a working demo :

http://jsfiddle.net/gion_13/Udf5N/

If you want to query the server for the new option list, in the change event handler, you should do an ajax request to the script that evaluates the current value of the first select-box and returns a list of options for the second one. In this ajax request callback you update the actual html based on the response :

$('select#first').change(function(e){
    $.getJson('script_name',{value : $(this).val()},function(result){
        $('select#second').html('');   // clear the existing options
        $.each(result,function(i,o){
            $("<option>" + o + "</option>").appendTo("select#second");
        }); 
    });            
});

edited Oct 18, 2011 at 7:19

answered Oct 18, 2011 at 6:56

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ramya Over a year ago

Thanks a lot gion.Here I want to populate the 2nd drop down with an sql query. The correponding ruby query is selected_release=Release.find(params[:id]) cycles=selected_release.cycles

ramya Over a year ago

Could you please help me with a jquery that corresponds to the query selected_release=Release.find(params[:id]) cycles=selected_release.cycles

ramya Over a year ago

any idea how can i use sql queries in jquery. My sql query is "select name from cycles where release_id=<>"

gion_13 Over a year ago

you have to use a server-side script which handles the database data-transfer (such as a ruby or a php script) and returns your result to the ajax callback. In my example script_name refers to the path to this script (for ex : 'script/get_options.php')

Collectives™ on Stack Overflow

javascript to dynamically populate a dropdown list box

1 Answer 1

http://jsfiddle.net/gion_13/Udf5N/

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related