Ruby on Rails のビューに、2つプルダウンメニューをつけ、一つ目のプルダウンメニューの選択内容によって二つ目のプルダウンメニューの選択肢を変化させたいです。(条件分岐)
そのためにjavascriptを用いて以下のように書きましたが、コードを実行しても二つ目のプルダウンメニューに選択肢が何も表示されず困っています。
###html.erb
lang
1<body bgcolor onLoad="functionName()"> 2<form name="formName" method="post" action="./pathToProgramFile"> 3<!--選択肢その1--> 4<select name = "selectName1" onChange="functionName()"> 5<option value = "果物">くだもの</option> 6<option value = "野菜">やさい</option> 7<option value = "肉類">にくるい</option> 8</select> 9<!--選択肢その2(選択肢その1の項目によって変化)--> 10<select name = "selectName2"> 11</select> 12</body> 13 14<--以下、jsを同じファイルに記入--> 15 16<script type = "text/javascript"> 17<!-- 18function functionName() 19{ 20var select1 = document.forms.formName.selectName1; //変数select1を宣言 21var select2 = document.forms.formName.selectName2; //変数select2を宣言 22 23select2.options.length = 0; // 選択肢の数がそれぞれに異なる場合、これが重要 24 25if (select1.options[select1.selectedIndex].value == "果物") 26{ 27select2.options[0] = new Option("りんご"); 28select2.options[1] = new Option("みかん"); 29select2.options[2] = new Option("オレンジ"); 30} 31 32else if (select1.options[select1.selectedIndex].value == "野菜") 33{ 34select2.options[0] = new Option("キャベツ"); 35select2.options[1] = new Option("きゅうり"); 36select2.options[2] = new Option("にんんじん"); 37select2.options[3] = new Option("たまねぎ"); 38} 39 40else if (select1.options[select1.selectedIndex].value == "肉類") 41{ 42select2.options[0] = new Option("豚肉"); 43select2.options[1] = new Option("牛肉"); 44} 45} 46//--> 47</script>
以上のHTML、javascriptのスクリプトは
http://www.ksknet.net/javascript/post_54.html
のものをそのまま引用しました。
また、html.erbのページにjsも書く記法は、
https://techacademy.jp/magazine/7611
を参考にしました。
初歩的な質問で申し訳ありませんが、不具合の原因を指摘いただけると幸いです。
個人的には、jsをhtml.erbと同じファイルに書くのが適当でない気がしています。
よろしくお願いいたします。