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

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

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

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

Q&A

1回答

1305閲覧

選択した値によって選択肢を変更させたい。

_nussy_

総合スコア5

JavaScript

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

0グッド

0クリップ

投稿2020/11/19 07:16

編集2022/01/12 10:55

前提・実現したいこと

個人でアプリケーションの作成を行っています。
JavaScript初学者で拙い文章・コードですが、よろしくお願いします。

(例)
「肉」を選択した場合、
=> 選択肢は「豚肉」「牛肉」「羊肉」の3つ
「魚」を選択した場合、
=> 選択肢は、「マグロ」「ハマチ」「アジ」の3つ

 上記のように、始めの選択肢次第で以降の選択肢の内容が異なる挙動を目指しています。

 どのような手段を用いればプルダウン内の選択肢は制限できるのでしょうか?
困っているので、教えていただけると幸いです、些細なヒントでもありがたいです。

【実現したいこと】
プルダウンで、選択された値によって以降の選択肢を変更させたい。

発生している問題・エラーメッセージ

選択肢の変更方法が分かりません。

該当のソースコード

HTML

1 2<div class="field_with_errors"><select class="select1" id="item-category" name="item[category_id]">    3 <option selected="selected" value="1">--</option> 4 <option value="2">肉</option> 5 <option value="3">魚/option> 6  (略) 7 </select></div> 8 9<div class="field_with_errors"><select class="select2 hidden1" id="item-food" name="item[food_id]">    10 <option selected="selected" value="1">--</option> 11 <option value="2">豚肉</option> 12 <option value="3">牛肉</option> 13 <option value="4">マグロ</option> 14  (略) 15 </select></div> 16 17

JavaScript

1 2 3 window.addEventListener('load', function(){ 4 const itemC = document.querySelectorAll("name[item=category_id]") 5 const itemF = document.querySelectorAll("name[item=food_id]"); 6 const itemCategory = document.getElementById("item-category"); 7 const itemFood = document.getElementById("item-food"); 8 9 10 //カテゴリーを選択しないとfoodの入力フォームが入力できないようにする 11 itemCategory.addEventListener('input', function(){ 12 if (itemFood.getAttribute("style") == "display:block;" || itemCategory.value == 1) { 13 itemFood.removeAttribute("style", "display:block;"); 14 } else { 15 itemFood.setAttribute("style", "display:inline-block;"); 16 } 17 }); 18 const itemCategoryValue = itemCategory.value 19 const itemFoodValue = itemFood.value 20 21 //カテゴリーで肉を選択した際には、「豚肉」「牛肉」しか選択肢にないようにする 22 //console.log(itemCategoryValue) =>カテゴリーIDの取得済 23 24 //foodの入力フォームをクリックした際の処理+カテゴリーで「肉」を選択した際の処理 25 itemFood.addEventListener('click', function(){ 26 if (itemCategory.value == 2) { 27 console.log(itemF); =>nodeListで取得する 28   console.log(itemFood); =>全てのselect要素取得する  29 } else { 30 console.log("×"); 31 } 32 }); 33 });

CSS

1  2 .hidden1{ 3 display: none; 4} 5 6

試したこと

nodeListについて、勉強しました。
https://developer.mozilla.org/ja/docs/Web/API/NodeList

今回は、nodeListで取得した後に、配列に置き換えて
foreach()メソッドを用いて反復させるのがいいのかなと読んでみて思いました。

しかしながら、反復したとしても何をすれば、選択肢から外すにはselect要素に
何を定義すればいいのか分かりません。

些細なヒントでもいただけると幸いです。

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

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

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

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

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

guest

回答1

0

以前同じようなものを作ったときは肉と魚のプルダウンを用意しました。
それらは初期表示がdisplay: noneで、肉が選択されたら肉プルダウンを、
魚が選択されたら魚プルダウンをdisplay: blockにしました。

今考えるとvisibility: hiddenで良いのではと思いますが、
display: noneだと値が送信されないなどあってそうした気がします。

投稿2020/11/19 15:18

neko_daisuki

総合スコア2090

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

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

_nussy_

2020/11/20 00:01

neko_daisuki 様 ご返信ありがとうございます。 教えていただいた方法は思いつきませんでした。 私が現在、取り組んでいた形としては 「肉」を選択した際に、 <option value="4">マグロ</option>以降に visibility: hiddenを追加する方法を考えていたのですが、 あまり向いていないのでしょうか? const itemFood = document.getElementById("item-food"); console.log(itemFood[i]); =>でインデックス番号の要素が取得できるのは確認済みです。 これを繰り返し文などを用いて処理するのかなと仮説の元、やっています、、、
neko_daisuki

2020/11/20 04:40

求めたい結果(送信されるデータ)が得られるなら方法は何でも良いと思いますよ。 パフォーマンス的には変わるかもしれませんが、気にするほどではないと思います。 optionにdata-parent属性をつけると簡単かもしれません。 <option data-parent="1" value="牛"> <option data-parent="1" value="肉"> <option data-parent="1" value="鳥"> <option data-parent="2" value="魚"> (以下のコードはイメージです) var options = document.querySelectorAll("options") Array.from(options).forEach(function (option) { if (option.getAttribute("data-parent") === currentNode) { option.style.visibility = "visible" } else { option.style.visibility = "hidden" } })
_nussy_

2020/11/20 06:10

neko_daisuki様 度々、ご対応ありがとうございます! 記述して頂いたコードは、イメージしている流れになりそうな感じがします。 ここまで教えていただき非常に助かっているのですが、1点お聞きしたいことがあります。 actineHashで、data-parent属性を追加する方法が分かりません。 元々のコード  <%= f.collection_select(:category_id, Category.all, :id, :name, {}, {class:"select1", id:"item-category"}) %> railsガイドでActiveHashについて確認しましたが、どこに記述すれば良いのか分かりません。 https://railsdoc.com/page/collection_select HTML内に記述するしかないと思うのですがどのあたりに記述するのでしょうか。 もし宜しければ教えて頂けないでしょうか?
neko_daisuki

2020/11/20 07:04

ごめんなさい。collection_selectを使った方法は分かりません。 フォームヘルパーは使わず、eachで書いていました。 ヘルパーを使いたい場合は f.select と options_for_selectを使った記事を見つけました(属性追加1のところ) https://qiita.com/ATORA1992/items/fc6217412c5bc004ac6c
_nussy_

2020/11/20 07:23

neko_daisuki様 言葉足らずの箇所が多くてお手数おかけました。 該当する記事までご用意していただきありがとうございます。 今一度コードを書き直すか検討してみます。 長々とお時間いただき、ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問