レール4の選択ボックスを自動入力する方法は？私のフォームで

Question

は、私は別の選択ボックス<%= f.select :form_fields %>を持って

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

のような選択ボックスを持っています。
ユーザーが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 

中を得るために、私のコントローラの新しい方法を書いて、私は

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

フォームフィールドのデータを取得するには、次のJSを試してみました編集
今、私はjsonでエンコードされた配列としてform_fieldsの配列を取得できます。しかし、関係なく、私は

<%= 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が正しいオプション値でロードされたドロップダウンを知っている、または既に持っていると仮定しました。これらの2つのドロップダウンフィールドが通常のレールページロードを使用してページにロードされると、このJSはそれに対処し、期待される結果を出します。