JavaScriptで2段階に連動するプルダウンの作成と要素の表示、非表示

備忘録として残しておきます

#HTML

choice.html

<select id="parent" onchange="date()" class="form">
  <option value="和食">和食</option>
  <option value="洋食">洋食</option>
  <option value="中華">中華</option>
  <option value="" disabled selected>選択してください</option>
</select>

<select id="children" class="form">
  <option value="" disabled selected>選択してください</option>
  <option value="味噌汁">味噌汁</option>
  <option value="肉じゃが">肉じゃが</option>
  <option value="天ぷら">天ぷら</option>

  <option value="グラタン">グラタン</option>
  <option value="オムライス">オムライス</option>
  <option value="ナポリタン">ナポリタン</option>

  <option value="麻婆豆腐">麻婆豆腐</option>
  <option value="餃子">餃子</option>
  <option value="春巻">春巻</option>
</select>

#CSS

choice2.css

#children option:disabled{
  display:none;
}
#children option{
  display:block;
}

#JavaScript

choice3.js

function date() {

//id="parent"の値を取得
var parentlement = document.getElementById( "parent" ) ;

//id="children"を取得
var childrenDate = document.getElementById("children") ;

   //disabledをtrueに
  for (var i = 0; i < childrenDate.length; i++){
       childrenDate.options[i].disabled = true;
  }
	// disabledに代入
     if( parentlement.value == "和食") {
	   childrenDate.options[1].disabled = false;//味噌汁
       childrenDate.options[2].disabled = false;//肉じゃが
       childrenDate.options[3].disabled = false;//天ぷら
     
    } else if( parentlement.value == "洋食") {
	   childrenDate.options[4].disabled = false;//グラタン
       childrenDate.options[5].disabled = false;//オムライス
       childrenDate.options[6].disabled = false;//ナポリタン
    
    } else if ( parentlement.value == "中華") {
	   childrenDate.options[7].disabled = false;//麻婆豆腐
       childrenDate.options[8].disabled = false;//餃子
       childrenDate.options[9].disabled = false;//春巻
    
	 } else if ( parentlement.value = "") {
	   childrenDate.disabled = true;
	}
}

和食を選択します。

和食を選択すると「味噌汁」「肉じゃが」「天ぷら」以外にdisabledが付きます。

disabledが付いたoptionは非表示になります。

choice2.css

#children option:disabled{
  display:none;
}

display:none;がなければこうなります。↓

#まとめ
このやり方でも一応動きますが、これではメンテナンスがしにくいのでJavaScriptの改善が必要みたいです。

#参考リンク
https://developer.mozilla.org/ja/docs/Web/CSS/:disabled