jquery - Rails 4中如何自动填充选择框？

Question

在我的表单中，我有一个像这样的选择框

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

我还有另一个选择框<%= f.select :form_fields %> .
现在，当用户选择form_name时，我想填充 form_fields 的选项根据表单名称选择框。
我在 Controller 中编写了一个新方法来获取 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 页面加载将这 2 个下拉字段加载到页面中，该 JS 就可以对其进行操作并发出预期的结果。