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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

1268閲覧

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

atsu-ori2018

総合スコア5

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/06/17 09:04

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

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

初期データの作成

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

現状

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

seed

1カテゴリー初期データ一部 2lady = Category.create(name: "レディース") 3lady_1 = lady.children.create(name: "トップス") 4lady_1.children.create([{name: "Tシャツ/カットソー(半袖/袖なし)"},{name: "Tシャツ/カットソー(七分/長袖)"},{name: "シャツ/ブラウス(半袖/袖なし)"},{name: "シャツ/ブラウス(七分/長袖)"},{name: "ポロシャツ"},{name: "キャミソール"},{name: "タンクトップ"},{name: "ホルターネック"},{name: "ニット/セーター"},{name: "チュニック"},{name: "カーディガン/ボレロ"},{name: "アンサンブル"},{name: "ベスト/ジレ"},{name: "パーカー"},{name: "トレーナー/スウェット"},{name: "ベアトップ/チューブトップ"},{name: "ジャージ"},{name: "その他"}]) 5lady_2 = lady.children.create(name: "ジャケット/アウター") 6lady_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: "その他"}]) 7lady_3 = lady.children.create(name: "パンツ") 8lady_3.children.create([{name: "デニム/ジーンズ"},{name: "ショートパンツ"},{name: "カジュアルパンツ"},{name: "ハーフパンツ"},{name: "チノパン"},{name: "ワークパンツ/カーゴパンツ"},{name: "クロップドパンツ"},{name: "サロペット/オーバーオール"},{name: "オールインワン"},{name: "サルエルパンツ"},{name: "ガウチョパンツ"},{name: "その他"}]) 9lady_4 = lady.children.create(name: "スカート") 10 11 12サイズの初期データ一部 13clothes = Size.create(name: "服のサイズ") 14clothes_1 = clothes.children.create(name: "XXS以下") 15clothes_2 = clothes.children.create(name: "XS(SS)") 16clothes_3 = clothes.children.create(name: "S") 17clothes_4 = clothes.children.create(name: "M") 18clothes_5 = clothes.children.create(name: "L") 19clothes_6 = clothes.children.create(name: "XL(LL)") 20clothes_7 = clothes.children.create(name: "2XL(3L)") 21clothes_8 = clothes.children.create(name: "3XL(4L)") 22clothes_9 = clothes.children.create(name: "4XL(5L)以上") 23clothes_10 = clothes.children.create(name: "FREE SIZE") 24 25women_shoes = Size.create(name: "靴のサイズ(女性)") 26women_shoes_1 = women_shoes.children.create(name: "20cm以下") 27women_shoes_2 = women_shoes.children.create(name: "20.5cm") 28women_shoes_3 = women_shoes.children.create(name: "21cm") 29women_shoes_4 = women_shoes.children.create(name: "21.5cm") 30women_shoes_5 = women_shoes.children.create(name: "22cm") 31women_shoes_6 = women_shoes.children.create(name: "22.5cm") 32women_shoes_7 = women_shoes.children.create(name: "23cm") 33women_shoes_8 = women_shoes.children.create(name: "23.5cm") 34women_shoes_9 = women_shoes.children.create(name: "24cm") 35women_shoes_10 = women_shoes.children.create(name: "24.5cm") 36women_shoes_11 = women_shoes.children.create(name: "25cm") 37women_shoes_12 = women_shoes.children.create(name: "25.5cm") 38women_shoes_13 = women_shoes.children.create(name: "26cm") 39women_shoes_14 = women_shoes.children.create(name: "26.5cm") 40women_shoes_15 = women_shoes.children.create(name: "27cm") 41women_shoes_16 = women_shoes.children.create(name: "27.5cm以上") 42 43 44中間テーブルのcategory-sizesテーブルの初期データ一部 45 46category_size = CategorySize.create({category_id: lady_1.children.ids,size_id:clothes.id}) 47category_size = CategorySize.create({category_id: lady_2.children.ids,size_id:clothes.id}) 48category_size = CategorySize.create({category_id: lady_3.children.ids,size_id:clothes.id}) 49category_size = CategorySize.create({category_id: lady_4.children.ids,size_id:clothes.id}) 50category_size = CategorySize.create({category_id: lady_17.children.ids,size_id:clothes.id}) 51category_size = CategorySize.create({category_id: lady_18.children.ids,size_id:clothes.id}) 52category_size = CategorySize.create({category_id: lady_6.children.ids,size_id:clothes.id}) 53category_size = CategorySize.create({category_id: lady_7.children.ids,size_id:clothes.id}) 54category_size = CategorySize.create({category_id: lady_8.children.ids,size_id:clothes.id}) 55 56category_size = CategorySize.create({category_id: lady_6.children.ids,size_id:women_shoes.id})

自分の中での疑問点

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

category.js内の記述

jquery

1 2 function appendSizeOption(size){ 3 var html = `<option value="${size.id}">${size.name}</option>`; 4 return html; 5 } 6 // サイズの表示作成 7 function appendSizeBox(insertHTML){ 8 var sizeSelectHtml = ''; 9 sizeSelectHtml = `<div class="listing-product-detail__size" id= 'size_wrapper'> 10 <label class="listing-default__label" for="サイズ">サイズ</label> 11 <span class='listing-default--require'>必須</span> 12 <div class='listing-select-wrapper__added--size'> 13 <div class='listing-select-wrapper__box'> 14 <select id="size" name="size_id> 15 <option value="---">選択してください</option> 16 ${insertHTML} 17 </select> 18 <i class='fas fa-chevron-down listing-select-wrapper__box--arrow-down'></i> 19 </div> 20 </div> 21 </div>`; 22 $('.product-details-container__top').append(sizeSelectHtml); 23 } 24 $('.product-details-container__top').on('change', '#grandchild_category', function(){ 25 var grandchildId = $('#grandchild_category option:selected').data('category'); //選択された孫カテゴリーのidを取得 26 if (grandchildId != "---"){ //孫カテゴリーが初期値でないことを確認 27 $.ajax({ 28 url: 'get_size', 29 type: 'GET', 30 data: { grandchild_id: grandchildId }, 31 dataType: 'json' 32 }) 33 .done(function(sizes){ 34 $('#size_wrapper').remove(); 35 $('#brand_wrapper').remove(); 36 // if (sizes.length != 0) { 37 var insertHTML = ''; 38 sizes.forEach(function(size){ 39 insertHTML += appendSizeOption(size); 40 }); 41 appendSizeBox(insertHTML); 42 // } 43 }) 44 .fail(function(){ 45 alert('サイズ取得に失敗しました'); 46 }) 47 }else{ 48 $('#size_wrapper').remove(); 49 } 50 });

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

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

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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


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

投稿2020/06/19 05:54

winterboum

総合スコア23284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問