Rails ダイナミックセレクト

ajax通信で子カテゴリを変えたいのですが、うまくいきません
お助けください

lang
1
2  def list
3    selected_category = Category.where(parent_id: list_params)
4    childs = selected_category.childs.sort{|a, b| a.code <=> b.code}
5    data = []
6    childs.each do |child|
7      data << {id: child.id, name: child.name}#child.code
8    end
9    respond_to do |format|
10      format.json { render json: data }
11    end
12  end
13
14
15
16  def list_params
17    params.require(:category_id)
18  end
19

lang
1$(document).on('change', '#category_select', function(evt) {
2                    $.ajax({
3                        type: 'GET',
4                        url: 'categoreis/list',
5                        dataType: 'json',
6                        data: {
7                            parent_id: $("#category_select option:selected").val()
8                        },
9                        error: function(jqXHR, textStatus, errorThrown) {
10                            console.log("AJAX Error: " + textStatus);
11                        },
12                        success: function(data, textStatus, jqXHR) {
13                            $("#child_select").empty();
14                            if (data.length == 0) {
15                                $("#child_select").hide();
16                            } else {
17                                $("#child_select").show();
18                            }
19                            $.each(data, function(idx, item) {
20                                // console.log("" + item.code + ":" + item.name);
21                                $("#child_select").append('<option value="' + item.code + '">' + item.name + '</option>');
22                            });
23                            console.log("Dynamic country select OK!");
24                        }
25                    });
26                });
27
28

lang
1
2        <div class="form-group">
3          <label for="categoryqid" class="col-sm-3 control-label">カテゴリ</label>
4          <div class="col-sm-9">
5
6            <%= f.select :code, options_for_select(@categories.collect { |category|
7                                                            [category.name, category.id] }), {:prompt => '選択してください' },
8                         { id: 'category_select', class: 'form-control select select-primary select-block mbl' } %>
9
10            
11            <%= f.select :category_id, options_for_select(@childs.collect { |child|
12                                                                [child.name, child.id] }), {:prompt => '選択してください' },
13                         { id: 'child_select' , class: 'form-control select select-primary select-block mbl'} %>
14
15          </div>
16        </div>
17

行動規範の内容に同意します

回答1件

自己解決

    <div class="form-group">
      <label for="category_id" class="col-sm-3 control-label">カテゴリ</label>
      <div class="col-sm-9">

        <%= f.select :category_id, options_for_select(@categories.collect { |category|
                                                        [category.name, category.id] }), {:prompt => '選択してください' },
                     { id: 'category_select', class: 'form-control select select-primary select-block mbl' } %>

        <br>
        <%= f.select :category_id, options_for_select(@childs.collect { |child|
                                                            [child.name, child.id] }), {:prompt => '選択してください' },
                     { id: 'child_select' , class: 'form-control select select-primary select-block mbl'} %>

      </div>
    </div>

def list
selected_category = Category.where(parent_id: list_params)
data = []
selected_category.each do |child|
data << {id: child.id, name: child.name}#child.code
end
respond_to do |format|
format.json { render json: data }
end
end

def list_params
params.require(:category_id)
end

$(document).on('change', '#category_select', function(evt) {
$.ajax({
type: 'GET',
url: 'categoreis/list',
dataType: 'json',
data: {
category_id: $("#category_select option:selected").val()
},
error: function(jqXHR, textStatus, errorThrown) {
console.log("AJAX Error: " + textStatus);
},
success: function(data, textStatus, jqXHR) {
$("#child_select").empty();
if (data.length == 0) {
$("#child_select").hide();
} else {
$("#child_select").show();
}
$.each(data, function(idx, item) {
// console.log("" + item.code + ":" + item.name);
$("#child_select").append('<option value="' + item.code + '">' + item.name + '</option>');
});
console.log("Dynamic country select OK!");
}
});
});