jQuery，Rails，填充選擇框

Question

我在填充選擇框時遇到問題，具體取決於單擊了具有給定category_id的哪個按鈕。 當我單擊其他按鈕時，下拉列表中的數據正確，但格式錯誤。 它不是寫為下拉列表，而是像數組“ [nam1，name2，....]”一樣全部寫在一行中，並且除了下拉列表之外，沒有其他選項（如果在ajax成功函數中，我將data [i]代替數據，那么我會在一個巨大的選擇中獲得每個字母，因此效果不佳）。 多謝您的協助。

控制器：

def update_names
  @categories = Category.all
  @category = Category.find params[:category_id]
  @labels = @category.category_labels.collect { |l| l.name }

  respond_to do |format|
    format.js { render json: @labels }
  end
end

jQuery的：

 $(function() {
  $('.categories_btn').each(function(e){
  $(this).on("click", function(e){
    e.preventDefault();
    e.stopImmediatePropagation();
    var category_id = $(this).attr("category_id");

    $.ajax('update_names', {
      type: 'GET',
      dataType: 'script',
      cache: true,
      data: {
        category_id: category_id
      },
      error: function(jqXHR, textStatus, errorThrown) {
        return console.log("AJAX Error: " + textStatus);
      },
      success: function(data, textStatus, jqXHR, json) {          
        $("select option").each(function(i, v) {
          $('#labels_name').html( $('<option value="'+ i +'">'+data +'</option>'));
        });
      }
    });
  });
});

視圖：

 = f.select :name, @labels.collect { |l| [l.name, l.id] }, id: 'names_select'

Answer 1

您的代碼中存在許多問題：

1. 您只返回每個標簽的name ，但也需要它們的id參數。

2. 您的dataType設置為script ，但是您返回JSON。

3. 您需要遍歷所接收的數據，而不是遍歷頁面上已存在的options 。

因此，要解決：

1）將您的控制器代碼更改為此：

def update_names
  @categories = Category.all
  @category = Category.find params[:category_id]
  @labels = @category.category_labels.map do |l| 
    { name: l.name, id: l.id } 
  end

  respond_to do |format|
    format.json { render json: @labels }
  end
end

2）將您的請求中的dataType更改為json 。

jQuery.ajax文檔說它將正確處理響應：

“ json”：將響應評估為JSON並返回一個JavaScript對象。

3）將您的success處理程序更改為此：

success: function(data, textStatus, jqXHR, json) { 
  var parent_element = $("#names_select");
  parent_element.html("");
  data.forEach(function(v) {
    var id = v.id;
    var name = v.name;
    parent_element.append('<option value="' + id '">' + name + '</option>');
  };
}