【Javascript】selectタグの選択で別のselectタグのメニュー項目を変更

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>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="js/main.js"></script>
</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入門
関連記事