如何自動填充導軌4中的選擇框？

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知道或已經有下載加載正確的選項值。一旦這兩個下拉字段將使用正常的軌道頁面加載在頁面中加載，該JS可以對其執行操作併發出預期的結果。