Question

目前我的表格看起来像是：

form_tag(manage_titans_admin_collection_path(collection), method: :post) do
  label_tag('Race:') +
  ' ' +
  select_tag(:race, options_for_select(Collectible.where(primary_type: 'cpt_golem').order('race asc').uniq.pluck(:race))) +
  ' ' +
  label_tag('Stage:') +
  ' ' +
  select_tag(:stage, options_for_select(1.upto(4))) +
  ' ' +
  label_tag('Level:') +
  ' ' +
  text_field_tag(:level, 1, style: 'width: 100px') +
  ' ' +
  submit_tag('Submit')
end

我想对其进行更改，以使:level选项为select_tag个连续数字，根据所选的:stage进行更改。例如，如果stage为1，我想显示1-20级，但如果选择了第2阶段，我想显示20到40级。

谢谢你的时间！

Answer 1

最后你使用的帮助器标签转换为html所以我会使用jquery的javascript函数：
假设您的页面中有a：

<select name="stage" id="stage">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
</select>

并且a：

<select name="level" id="level"></select>

该功能将是这样的：

$(document).ready(function(){
    $('#stage').on('change', function() {
        var level = $("#level");
        var value = this.value;
        level.empty();
        if (value == 1) {
            init = 1;
            final = 20;
        } else if(value == 2) {
            init = 21;
            final = 40;
        } else if(value == 3) {
            init = 41;
            final = 60;
        } else if (value == 4) {
            init = 61;
            final = 80;
        }
        var cont = 0;
        for(var i=0; (init+cont)<=final; i++) {
            level.append('<option value="'+(init + cont)+'">'+(init + cont)+'</option>')
            cont++;
        }
    });
    $('#stage').change();
});

如果要更改级别，只需更新函数中的数字即可。或者添加另一个条件希望它有所帮助。

Answer 2

与@danielR相同的概念，但实施更清晰：

（也假设为@danielR，第2阶段的范围应该是21-40而不是20-40。）

<强> HTML

<select id='stage'>
    <option></option>
    <option value='1'>1</option>
    <option value='2'>2</option>
    <option value='3'>3</option>
    <option value='4'>4</option>
</select>
<select id='level'><option></option></select>

<强>的jQuery

function addOptions(selector, modifier){
    $(selector).each(function(){ 
        $(this).find('option').remove().end().append('<option></option>');
        start = ((modifier - 1) * 20) + 1;
        end = modifier * 20;
        for (i = start; i <= end; i++){
            $('<option>').text(i).val(i).appendTo($(this));
        }
    });
}


$(document).ready(function(){    
    $('#stage').on('change',function(){
        addOptions('#level', parseInt($(this).val(),10));
    });
});

jsFiddle Example

ActiveAdmin动态select_tag基于其他选择

2 个答案: