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

Question

前提・実現したいこと

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

（例）
「肉」を選択した場合、
＝＞　選択肢は「豚肉」「牛肉」「羊肉」の3つ
「魚」を選択した場合、
＝＞　選択肢は、「マグロ」「ハマチ」「アジ」の3つ

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

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

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

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

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

該当のソースコード

<div class="field_with_errors"><select class="select1" id="item-category" name="item[category_id]">　　　
  <option selected="selected" value="1">--</option>
  <option value="2">肉</option>
  <option value="3">魚/option>
　　（略）
 </select></div>

<div class="field_with_errors"><select class="select2 hidden1" id="item-food" name="item[food_id]">　　　
  <option selected="selected" value="1">--</option>
  <option value="2">豚肉</option>
  <option value="3">牛肉</option>
  <option value="4">マグロ</option>
　　（略）
 </select></div>

 window.addEventListener('load', function(){
  const itemC = document.querySelectorAll("name[item=category_id]")
  const itemF = document.querySelectorAll("name[item=food_id]");
  const itemCategory = document.getElementById("item-category");
  const itemFood = document.getElementById("item-food");


　//カテゴリーを選択しないとfoodの入力フォームが入力できないようにする
  itemCategory.addEventListener('input', function(){
    if (itemFood.getAttribute("style") == "display:block;" || itemCategory.value == 1) {
      itemFood.removeAttribute("style", "display:block;");
    } else {
      itemFood.setAttribute("style", "display:inline-block;");
    }
   });
  const itemCategoryValue = itemCategory.value
  const itemFoodValue = itemFood.value
       
  //カテゴリーで肉を選択した際には、「豚肉」「牛肉」しか選択肢にないようにする
  //console.log(itemCategoryValue) =>カテゴリーIDの取得済
       
  //foodの入力フォームをクリックした際の処理＋カテゴリーで「肉」を選択した際の処理
  itemFood.addEventListener('click', function(){
    if (itemCategory.value == 2) {
     console.log(itemF);　＝＞nodeListで取得する
　　　console.log(itemFood);　＝＞全てのselect要素取得する　
    } else {
       console.log("×");
      }
   });
  });

　
　.hidden1{
  display: none;
}

試したこと

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

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

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

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

Answer 1

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

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

Comments

[_nussy_]

neko_daisuki 様
ご返信ありがとうございます。
教えていただいた方法は思いつきませんでした。

私が現在、取り組んでいた形としては
「肉」を選択した際に、
<option value="4">マグロ</option>以降に
visibility: hiddenを追加する方法を考えていたのですが、
あまり向いていないのでしょうか？

const itemFood = document.getElementById("item-food");
console.log(itemFood[ｉ]);　＝＞でインデックス番号の要素が取得できるのは確認済みです。
これを繰り返し文などを用いて処理するのかなと仮説の元、やっています、、、

[neko_daisuki]

求めたい結果(送信されるデータ)が得られるなら方法は何でも良いと思いますよ。
パフォーマンス的には変わるかもしれませんが、気にするほどではないと思います。

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_]

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]

ごめんなさい。collection_selectを使った方法は分かりません。
フォームヘルパーは使わず、eachで書いていました。

ヘルパーを使いたい場合は
f.select と options_for_selectを使った記事を見つけました(属性追加１のところ)
https://qiita.com/ATORA1992/items/fc6217412c5bc004ac6c

[_nussy_]

neko_daisuki様
言葉足らずの箇所が多くてお手数おかけました。

該当する記事までご用意していただきありがとうございます。
今一度コードを書き直すか検討してみます。
長々とお時間いただき、ありがとうございました！