如何使用下拉菜單更新/預填充Rails表單

Question

我正在嘗試使用下拉列表創建一個表單，如果選擇了“創建新的”之類的東西，或者用戶可以從先前創建的對象中選擇，則用戶可以創建一個新對象，這將用相應的數據預填充表單。

目前，對於每個循環，我只是有一個用於在下拉列表中填充表單外部的先前創建的對象以及創建新對象的表單。

如何使此表單具有動態性，以便在選擇先前選擇的對象時，該表單會預先填充並允許編輯？

Answer 1

您必須將AJAX GET請求發送到自定義路由，然后執行控制器操作以響應json格式，並根據在該GET請求中傳遞的參數返回集合。 假設您要根據選定的品牌加載可用的汽車型號：

路線：

get '/get_models/:make_id', to: 'car_makes#available_models'

控制器動作：

def available_models
  @models = Model.where(id: ids)
  respond_to do |format|
    format.json { render json: @models } 
  end
end 

AJAX請求：

var fetchModels = function(makeId){
  $.ajax({
    method: 'GET',
    url:     '/get_models/' + makeId,
    success: function(data) {
      ...
      var target = $('select#car_models');  // field to which options are appended
      $.each(data, function(id, model){
        $(target).append(
          $('<option>').text(model).attr('value', id) // populate options             );
      });
    }
    ...
  });
}

然后在父select字段中將AJAX請求設置為在.change事件上.change ：

$('select#car_makes').change(function(){
   var makeId = $(this).val();
   fetchModels(makeId); 
});

有許多資源說明了實現此目標的其他方法：

• https://gorails.com/episodes/jquery-ujs-and-ajax
• http://railscasts.com/episodes/88-dynamic-select-menus-revised

Answer 2

因此，我最終遍歷了select下拉列表的所有可能選項，並遍歷了帶有所有潛在選項的edit rails表單，並使用jQuery onchange顯示/隱藏了正確的html。

這對我來說不是一個很好的解決方案，尤其是因為它每次都必須加載所有選項的html ..但我不知道該怎么辦才能奏效。

如果有人對更好的解決方案有任何想法，請告訴我：)