- 締切済み
入力フォームでのIF文
現在、入力フォームを作っているのですが、思った動作にならず、たいへん苦慮しております。どなたか良きアドバイスいただけますと幸いでございます。 ＜内容＞ ベースの素材選択部分でで◆オリジナル素材を選択した場合のみ、次のベースカラーの選択でオリジナルしか選択できない様にしたい。 うまく動作せず困り果てています。 どなたかご教授いただけますとたいへん助かります。 どうぞ宜しくお願い致します。 ********************************************************** 以下がうまく動作しないソースです。 ********************************************************** ◆ベースの素材を選んでください<br> <select name="base_material" onChange="javascript:test();"> <option selected>◆ラバー起毛素材</option> <option>◆オリジナル素材</option> <option>◆ジャージ起毛素材</option> <option>◆ジャージ素材</option> </select><br> ベースカラー<BR> <select name="aaa"> <option selected>◆青色</option> <option>◆オリジナル</option> <option>◆赤色</option> <option>◆白色</option> </select> <SCRIPT Language="JavaScript"> function test() { if (document.getElementsByName("base_material")[0].selectedIndex == 1) { document.getElementsByName("aaa").item(0).value = "◆オリジナル"; } else { document.getElementsByName("aaa")[0].style.backgroundColor="white"; } } </SCRIPT>
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Yanch
- ベストアンサー率50% (114/225)
若干面倒な方法ですが、解決例です。 ==================== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript"> <!-- function test() { if (document.getElementsByName("base_material")[0].selectedIndex == 1) { obj = document.getElementsByName("aaa").item(0); obj_form = document.getElementById("formid1"); // ●行数が１行のselectを作成し、置き換え。 newSelect = document.createElement("select"); newSelect.setAttribute("name", "aaa"); newSelect.appendChild(document.createElement("option")); obj_form.replaceChild(newSelect, obj); obj = document.getElementsByName("aaa").item(0); // ●optionの最初の内容を"◆オリジナル"に変更。 obj.options[0].text = "◆オリジナル"; // ●optionの最初の内容を選択。 obj.options[0].selected = true; } else { document.getElementsByName("aaa")[0].style.backgroundColor="white"; obj_form = document.getElementById("formid1"); obj = document.getElementsByName("aaa").item(0); save_value = obj.value; // ●行数が４行のselectを作成し、置き換え。 newSelect = document.createElement("select"); newSelect.setAttribute("name", "aaa"); newSelect.appendChild(document.createElement("option")); newSelect.appendChild(document.createElement("option")); newSelect.appendChild(document.createElement("option")); newSelect.appendChild(document.createElement("option")); obj_form.replaceChild(newSelect, obj); obj = document.getElementsByName("aaa").item(0); obj.options[0].text = "◆青色"; obj.options[1].text = "◆オリジナル"; obj.options[2].text = "◆赤色"; obj.options[3].text = "◆白色"; obj.value = save_value; } } // --> </script> </head> <body> <table border="1"> <tr> <td> <form id="formid1" action="http://localhost/test" method="post"> ◆ベースの素材を選んでください<br> <select name="base_material" onChange="test();"> <option selected>◆ラバー起毛素材</option> <option>◆オリジナル素材</option> <option>◆ジャージ起毛素材</option> <option>◆ジャージ素材</option> </select><br> ベースカラー<BR> <select name="aaa"> <option selected>◆青色</option> <option>◆オリジナル</option> <option>◆赤色</option> <option>◆白色</option> </select> <br> <input type="submit" value="送信"> </form> </td> </tr> </table> </body> </html>
お礼
ありがとうございます。 たいへんわかりやすく説明いただき非常に助かりました。 流石でございます。