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, Oct 18 '11 at 06:48
The connection is that one release caqn have multiple cycles. — ramya, Oct 18 '11 at 06:50
Check this link http://stackoverflow.com/questions/815103/jquery-best-practice-to-populate-drop-down — Ghyath Serhal, Oct 18 '11 at 06:50

gion_13 · Accepted Answer · 2011-10-18T07:19:23.233

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");
        }); 
    });            
});

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, Oct 18 '11 at 07:06
Could you please help me with a jquery that corresponds to the query selected_release=Release.find(params[:id]) cycles=selected_release.cycles — ramya, Oct 18 '11 at 09:29
any idea how can i use sql queries in jquery. My sql query is "select name from cycles where release_id=<>" — ramya, Oct 18 '11 at 09:41
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') — gion_13, Oct 18 '11 at 10:01

javascript to dynamically populate a dropdown list box

1 Answers1

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

Linked