宗教上家系ラー食

宗教上の都合家系ラーメン食べます。

仕事関係のIT情報(ソフト、ハート、ガジェット、周辺機器)から趣味の写真、株、バイク等幅広く何でも書いていく備忘録的ブログです。

MENU

HTML、JSで選択肢によってドロップダウンのメニューリストを変更する方法

「ソースコードを開示し説明箇所を赤く囲む」の写真
やりたいこと

javascriptを使ってドロップダウンリスト(セレクトボックス)の内容を動的に変更する事を実現したい。
詳しくは、1つ目のDDLで分類を選択して、その分類によって項目を動的に帰る事やりたい。
こういう内容って調べにくいよね…

HTML

<body bgcolor onLoad="functionName()">
<form name="formName" method="post" action="./pathToProgramFile">

<select name = "selectName1" onChange="functionName()">
<option value = "1">選択肢1</option>
<option value = "2">選択肢2</option>
<option value = "3">選択肢3</option>
</select>
<!--(上記選択肢の項目で変化)-->
<select name = "selectName2">
</select>
</body>

 


JS

<script type = "text/javascript">
<!--
function functionName()
{
var select1 = document.forms.formName.selectName1; //変数select1を宣言
var select2 = document.forms.formName.selectName2; //変数select2を宣言

select2.options.length = 0;

if (select1.options[select1.selectedIndex].value == "1")
{
select2.options[0] = new Option("選択肢1-1");
select2.options[1] = new Option("選択肢1-2");
select2.options[2] = new Option("選択肢1-3");
}

else if (select1.options[select1.selectedIndex].value == "2")
{
select2.options[0] = new Option("選択肢2-1");
select2.options[1] = new Option("選択肢2-2");
select2.options[2] = new Option("選択肢2-3");
select2.options[3] = new Option("選択肢2-4");
}

else if (select1.options[select1.selectedIndex].value == "3")
{
select2.options[0] = new Option("選択肢3-1");
select2.options[1] = new Option("選択肢3-2");
}
}

//-->
</script>