Question

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

javascript动态填充下拉列表框

1 个答案:

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