質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.19%

Rails ダイナミックセレクト

解決済

回答 1

投稿 ・編集

  • 評価
  • クリップ 0
  • VIEW 1,247

smith

score 169

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



  def list
    selected_category = Category.where(parent_id: list_params)
    childs = selected_category.childs.sort{|a, b| a.code <=> b.code}
    data = []
    childs.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: {
                            parent_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!");
                        }
                    });
                });


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

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

            
            <%= 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>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0



        <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!");
                        }
                    });
                });


投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る