javascript动态填充下拉列表框

Question

我有一个 ruby​​ on rails 应用程序。我有 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");
        }); 
    });            
});