Javascriptでselectタグの選択肢によって、別のselectタグのメニュー項目を変更する方法をソースコード付きでまとめました。
## selectタグの選択で別のselectタグのメニュー項目を変更
Javascriptでselectタグの選択肢によって、別のselectタグのメニュー項目を変更します。
## サンプルコード
サンプルプログラムのソースコードです。
Javascript
js/main.js
function initSelect(){
var select1 = document.forms.formName.select1;
var select2 = document.forms.formName.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");
}else if (select1.options[select1.selectedIndex].value == "3")
{
select2.options[0] = new Option("3-1");
select2.options[1] = new Option("3-2");
select2.options[2] = new Option("3-3");
}
};
window.onload = function() {
var select1 = document.forms.formName.select1;
select1.options[0] = new Option("1");
select1.options[1] = new Option("2");
select1.options[2] = new Option("3");
document.getElementById("select1").onclick = function() {
initSelect();
};
};
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>TEST</title>
<pre title="http://code.jquery.com/jquery-1.11.1.js"></pre>
<pre title="js/main.js"></pre>
</head>
<body>
<form name="formName" method="post" action="./pathToProgramFile">
<!-- 選択肢1-->
<select name = "select1" id="select1">
</select>
<!-- 選択肢2（選択肢1で選んだ項目で変化）-->
<select name = "select2">
</select>
</body>
</html>
| – | 関連ページ |
|---|---|
| 1 | ■【Vue.js入門】使い方・サンプル集 |
| 2 | ■Javascript入門 サンプル集 |
| 3 | ■Node.js入門 |
コメント