javascript动态填充下拉列表框

我有一个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){ $('' + o + '').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标记是这样的：

  1 2 3    

这是一个有效的演示：

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){ $("" + o + "").appendTo("select#second"); }); }); });