Question

在我的表单中，我有一个像

这样的选择框

<%= f.select :form_name, get_form_names, { }, { class: 'selectpicker', required: true }  %>

我有另一个选择框<%= f.select :form_fields %> 现在，当用户选择form_name时，我想根据表单的名称填充form_fields选择框的选项。我在我的控制器中编写了一个新方法来获取form_fields

def get_form_fields
  @fields = (params[:form_is].constantize).column_names
  respond_to do |format|
    format.js
  end
end

并在我的routes.rb

中

get 'export_from_form/get_form_fields'
resources: export_from_forms

我尝试了以下JS来获取表单字段数据

$(function(){
  $("#export_from_form_form_name").on('change', function(){
    var form_name = $("#export_from_form_form_name:selected").val();
    $.ajax({
      url: "get_form_fields",
      type: 'GET',
      dataType: 'script',
      data: { form_is: form_name},
      error: function(jqXHR, textStatus, errorThrown){ 
        console.log("AJAX Error: " + errorThrown); 
      },
      success: function(data, textStatus, jqXHR){
        console.log('Dynamic column slect OK!  ' + data);
      }
    });
  });
});

修改
现在我能够将一个form_fields数组作为json编码数组。但无论我尝试什么，我都无法将此数组作为

的选项附加

<%= f.select :form_fields,[], { prompt: "Select Column names" }, { :multiple => true, class: 'selectpicker', required: true }  %>

这是我的js：

$(function(){
  $("#export_from_form_form_name").on('change', function(){
    var name =$("#export_from_form_form_name").val();
    $.ajax({
      url: "get_columns",
      type: 'GET',
      dataType: 'json',
      data: { form_is: name},
      error: function(jqXHR, textStatus, errorThrown){ console.log("AJAX Error: " + errorThrown); },
      success: function(data, textStatus, jqXHR){
        console.log(data);
        change_select(data);
      }
    });
  });
});
function change_select(data) { 
    $("#export_from_form_form_fields").empty();//remove all previous majors
    var length = data.length;
    for(i = 0;i<length;i++){ 
        $("#export_from_form_form_fields").append(//add in an option for each major
            $("<option></option>").attr("value", data[i]).text(data[i])
        );
    }
}

Answer 1

我试图用一个简单的例子来证明这一点。我希望这能让你认为问题朝着正确的方向发展。

<label> Select a color: </label>
<select id="colors">
  <option value="">Please Select a color</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

<hr/>

<label> Select a Fruit: </label>
<select id="fruits">
  <option value="cherries" data-color="red">Cherries</option>
  <option value="cranberries" data-color="red">Cranberries</option>
  <option value="strawberries" data-color="red">Strawberries</option>
  <option value="limes" data-color="green">Limes</option>
  <option value="honeydew" data-color="green">Honeydew</option>
  <option value="avocados" data-color="green">Avocados</option>
</select>

这是必需的jquery

var $fruit = $("#fruits");
var $color = $("#colors");
var $fruitValues = $fruit.find("option").clone();

$fruit.empty().append('<option value="">Please Select a Fruit</option>');

$color.change(function(event) {
  var options,
    selected = $(this).val();

  $fruit.find('option').not("option:first").remove();
  if (selected.length === 0 || selected === void 0) return false;

  $fruitValues.filter(function(index, element) {
    return $(element).data('color') === selected
  }).appendTo($fruit);
});

这是JSFiddle。

这个答案只集中解释了如何使用普通的JS使2个下拉列表依赖。我假设OP知道或已经有下载加载了正确的选项值。一旦使用普通的rails页面加载在页面中加载这两个下拉字段，这个JS就可以对它进行操作并发出预期的结果。

如何在导轨4中自动填充选择框？

1 个答案: