Question

我在填充选择框时遇到问题，具体取决于点击了给定category_id的按钮。当我点击其他按钮但格式不正确时，我在下拉列表中获得了正确的数据。它不是作为一个下拉列表写的，而是像一个数组一样在一行中编号＆＃34; [nam1，name2，....]＆＃34;除了那个之外的下拉列表中没有其他选项（如果在ajax成功函数中我放置数据[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

您的代码中存在许多问题：

您只为每个标签返回name，但您也需要id参数。
您的dataType设置为script，但您返回JSON。
您需要遍历您收到的数据，而不是遍布页面上的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 documentation表示会正确处理回复：

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

jQuery，Rails，填充选择框

1 个答案: