javascript动态填充下拉列表框

Question

我有一个ruby on rails application.I有2个下拉框.我必须根据第一个选择填充第二个下拉框.

HTML代码是

-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%"}

现在我需要循环下拉以从发布中填充.

请帮我解决这个问题.

Answer 1

基本上你应该添加一个事件处理程序,当第一个下拉列表被更改时将触发该事件处理程序,该处理程序根据第一个选择的选项填充第二个下拉列表:

$('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'];
}

当然,你的html标记是这样的:

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

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

这是一个有效的演示:

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

如果要查询服务器以获取新选项列表,请在更改事件处理程序中,对脚本执行ajax请求,该脚本将评估第一个选择框的当前值,并返回第二个选项框的选项列表.在这个ajax请求回调中,您可以根据响应更新实际的html:

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