動的なサイズのセレクトボックスを作る

Question

カテゴリーテーブルで選択された項目に応じて動的に変化して表示されるサイズのセレクトボックスを作成中です。

用意しているのはsizeテーブルとcategoryテーブル、そして複数のカテゴリーから複数のサイズを引き出すという考えでcategory_sizesテーブルという中間テーブルを作成しました。

初期データの作成

seeds.rb内にcategoryテーブルとsizeテーブルへの初期データを書き込みrails db:seedでデータベースへ値を入力。(どちらもgem ancestryを使用)

現状

• カテゴリーは問題なく表示されている。
• カテゴリーの孫要素を選択した後にサイズが表示されない。（404や505のエラー表示はされない）

カテゴリー初期データ一部
lady = Category.create(name: "レディース")
lady_1 = lady.children.create(name: "トップス")
lady_1.children.create([{name: "Tシャツ/カットソー(半袖/袖なし)"},{name: "Tシャツ/カットソー(七分/長袖)"},{name: "シャツ/ブラウス(半袖/袖なし)"},{name: "シャツ/ブラウス(七分/長袖)"},{name: "ポロシャツ"},{name: "キャミソール"},{name: "タンクトップ"},{name: "ホルターネック"},{name: "ニット/セーター"},{name: "チュニック"},{name: "カーディガン/ボレロ"},{name: "アンサンブル"},{name: "ベスト/ジレ"},{name: "パーカー"},{name: "トレーナー/スウェット"},{name: "ベアトップ/チューブトップ"},{name: "ジャージ"},{name: "その他"}])
lady_2 = lady.children.create(name: "ジャケット/アウター")
lady_2.children.create([{name: "テーラードジャケット"},{name: "ノーカラージャケット"},{name: "Gジャン/デニムジャケット"},{name: "レザージャケット"},{name: "ダウンジャケット"},{name: "ライダースジャケット"},{name: "ミリタリージャケット"},{name: "ダウンベスト"},{name: "ジャンパー/ブルゾン"},{name: "ポンチョ"},{name: "ロングコート"},{name: "トレンチコート"},{name: "ダッフルコート"},{name: "ピーコート"},{name: "チェスターコート"},{name: "モッズコート"},{name: "スタジャン"},{name: "毛皮/ファーコート"},{name: "スプリングコート"},{name: "スカジャン"},{name: "その他"}])
lady_3 = lady.children.create(name: "パンツ")
lady_3.children.create([{name: "デニム/ジーンズ"},{name: "ショートパンツ"},{name: "カジュアルパンツ"},{name: "ハーフパンツ"},{name: "チノパン"},{name: "ワークパンツ/カーゴパンツ"},{name: "クロップドパンツ"},{name: "サロペット/オーバーオール"},{name: "オールインワン"},{name: "サルエルパンツ"},{name: "ガウチョパンツ"},{name: "その他"}])
lady_4 = lady.children.create(name: "スカート")


サイズの初期データ一部
clothes = Size.create(name: "服のサイズ")
clothes_1 = clothes.children.create(name: "XXS以下")
clothes_2 = clothes.children.create(name: "XS（SS）")
clothes_3 = clothes.children.create(name: "S")
clothes_4 = clothes.children.create(name: "M")
clothes_5 = clothes.children.create(name: "L")
clothes_6 = clothes.children.create(name: "XL(LL)")
clothes_7 = clothes.children.create(name: "2XL(3L)")
clothes_8 = clothes.children.create(name: "3XL(4L)")
clothes_9 = clothes.children.create(name: "4XL(5L)以上")
clothes_10 = clothes.children.create(name: "FREE SIZE")

women_shoes = Size.create(name: "靴のサイズ（女性）")
women_shoes_1 = women_shoes.children.create(name: "20cm以下")
women_shoes_2 = women_shoes.children.create(name: "20.5cm")
women_shoes_3 = women_shoes.children.create(name: "21cm")
women_shoes_4 = women_shoes.children.create(name: "21.5cm")
women_shoes_5 = women_shoes.children.create(name: "22cm")
women_shoes_6 = women_shoes.children.create(name: "22.5cm")
women_shoes_7 = women_shoes.children.create(name: "23cm")
women_shoes_8 = women_shoes.children.create(name: "23.5cm")
women_shoes_9 = women_shoes.children.create(name: "24cm")
women_shoes_10 = women_shoes.children.create(name: "24.5cm")
women_shoes_11 = women_shoes.children.create(name: "25cm")
women_shoes_12 = women_shoes.children.create(name: "25.5cm")
women_shoes_13 = women_shoes.children.create(name: "26cm")
women_shoes_14 = women_shoes.children.create(name: "26.5cm")
women_shoes_15 = women_shoes.children.create(name: "27cm")
women_shoes_16 = women_shoes.children.create(name: "27.5cm以上")


中間テーブルのcategory-sizesテーブルの初期データ一部

category_size = CategorySize.create({category_id: lady_1.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_2.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_3.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_4.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_17.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_18.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_6.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_7.children.ids,size_id:clothes.id})
category_size = CategorySize.create({category_id: lady_8.children.ids,size_id:clothes.id})

category_size = CategorySize.create({category_id: lady_6.children.ids,size_id:women_shoes.id})

自分の中での疑問点

• 中間テーブルの初期データをSeeds.rbへ挿入するという考え方は基本的にあるのか。
• 上記のSeeds.rbへの中間テーブル初期データの入力はこの記述で間違っていないのか。

category.js内の記述

  function appendSizeOption(size){
    var html = `<option value="${size.id}">${size.name}</option>`;
    return html;
  }
  // サイズの表示作成
  function appendSizeBox(insertHTML){
    var sizeSelectHtml = '';
    sizeSelectHtml = `<div class="listing-product-detail__size" id= 'size_wrapper'>
                        <label class="listing-default__label" for="サイズ">サイズ</label>
                        <span class='listing-default--require'>必須</span>
                        <div class='listing-select-wrapper__added--size'>
                          <div class='listing-select-wrapper__box'>
                            <select id="size" name="size_id>
                              <option value="---">選択してください</option>
                              ${insertHTML}
                            </select>
                            <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i>
                          </div>
                        </div>
                      </div>`;
    $('.product-details-container__top').append(sizeSelectHtml);
  }
  $('.product-details-container__top').on('change', '#grandchild_category', function(){
    var grandchildId = $('#grandchild_category option:selected').data('category'); //選択された孫カテゴリーのidを取得
    if (grandchildId != "---"){ //孫カテゴリーが初期値でないことを確認
      $.ajax({
        url: 'get_size',
        type: 'GET',
        data: { grandchild_id: grandchildId },
        dataType: 'json'
      })
      .done(function(sizes){
        $('#size_wrapper').remove(); 
        $('#brand_wrapper').remove();
        // if (sizes.length != 0) {
        var insertHTML = '';
          sizes.forEach(function(size){
            insertHTML += appendSizeOption(size);
          });
          appendSizeBox(insertHTML);
        // }
      })
      .fail(function(){
        alert('サイズ取得に失敗しました');
      })
    }else{
      $('#size_wrapper').remove(); 
    }
  });

json.jbuilder

json.array! @sizes do |size|
  json.id size.id
  json.size size.size
end

items_controller.rb

  def get_size
    selected_grandchild = Category.find("#{params[:grandchild_id]}") #孫カテゴリーを取得
    if related_size_parent = selected_grandchild.sizes[0] #孫カテゴリーと紐付くサイズ（親）があれば取得
      @sizes = related_size_parent.children #紐づいたサイズ（親）の子供の配列を取得
    else
      selected_child = Category.find("#{params[:grandchild_id]}").parent #孫カテゴリーの親を取得
      if related_size_parent = selected_child.sizes[0] #孫カテゴリーの親と紐付くサイズ（親）があれば取得
          @sizes = related_size_parent.children #紐づいたサイズ（親）の子供の配列を取得
      end
    end
  end

カテゴリーの表示はできましたがカテゴリーからサイズのデータがとりだせません。
かれこれ１週間ほど色々な記事を参考にここまできましたがここでつまずいております。
アドバイスをいただくと本当にありがたいです。どうかよろしくお願いします。

Answer 1

質問のタイトル直しましょう。「セレクタのサイズを動的に変える」、CSSの話かと思っていました。「セレクトボックスの選択肢を動的に変更する」ぐらいでしょうか。
で、これですと検索すると色々出てくると思います。
[rails selectの内容を動的に変える] でよさそう。

で
・中間テーブルの初期データをSeeds.rbへ挿入するという考え方は基本的にあるのか。
よいと思います
・上記のSeeds.rbへの中間テーブル初期データの入力はこの記述で間違っていないのか。
中間テーブル以前にSize、Categoryのseedの入れ方が？？？　です。
モデルの関連定義の所を載せてください。