Jquery 如何在rails 4中自动填充选择框？

在我的表单中，我有一个选择框，如

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

在my

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);
      }
    });
  });
});

编辑

现在我可以获得一个表单字段数组作为json编码的数组。但无论我尝试什么，我都无法将此数组附加为

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

true，类：'selectpicker'，必需：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])
        );
    }
}

$（函数（）{
$（“#从表格导出表格名称”）。在（'change'，function（）上{
var name=$（“#从表格导出表格名称”）.val（）；
$.ajax({
url:“获取列”，
键入：“GET”，
数据类型：“json”，
数据：{form_is:name}，
错误：函数（jqXHR，textStatus，errorwhold）{console.log（“AJAX错误：+errorwhold）；}，
成功：函数（数据、文本状态、jqXHR）{
控制台日志（数据）；
更改/选择（数据）；
}
});
});
});
功能更改_选择（数据）{
$（“#从_表单_表单_字段导出_”）.empty（）；//删除以前的所有主要字段
变量长度=data.length；
对于（i=0；i我试图用一个简单的例子来说明这一点。我希望这能让你正确地思考问题

<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（“选项”）.clone（）；
$fruit.empty（）.append（'请选择一个水果'）；
$color.change（功能（事件）{
var期权，
selected=$（this.val（）；
$fruit.find（'option'）.not（'option:first'）.remove（）；
if（selected.length==0 | | selected==void 0）返回false；
$fruitValues.filter（函数（索引，元素）{
返回$（元素）。数据（'color'）==已选择
}).appendo（$水果）；
});

这是

这个答案只是为了解释如何使用普通JS使两个下拉列表相互依赖。我假设OP知道或者已经用正确的选项值加载了下拉列表。一旦使用普通rails页面加载将这两个下拉列表字段加载到页面中，这个JS就可以对其进行操作并发出预期结果。
您能提供额外的inf吗关于如何填充第二个选择框的格式？。可能会发布整个表单代码？可能会使用纯javascript来完成此操作…或者每次有人选择表单名称时，您是否希望发送请求？@Tony提示您需要使用JS进行此操作。@ArupRakshit请查看我的编辑。请帮助我了解需要进行哪些更改make@mahatmanich我添加了我尝试过的JS，请指导我进行所需的更改。请原谅我的无知，你真的认为在选择表单名称之前加载所有表单字段更好吗？？
<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>