以下のページで使用したJavaScriptのメモです。
https://naon56.github.io/nikkiup2u3/

全体のソースコードは以下から見られます。
https://github.com/naon56/nikkiup2u3/tree/gh-pages



前回の記事
http://naon56-note.blog.jp/archives/4827743.html


選択肢によってドロップダウンの内容を変える

JavaScript
function setQuestNum(){ //クエスト番号を選択

var select3 = document.forms.formStageQuest.quest; //変数select3を宣言
var select4 = document.forms.formStageQuest.questnum; //変数select4を宣言

//メインクエスト
var mainQuestNumText2_1 = new Array(
"クエスト番号を選択",
"第2部1-1"
);

var mainQuesNumtVal2_1 = new Array(
"選択",
"2-1-1"
);

select4.options.length = 0; //選択肢の数がそれぞれに異なる場合、これが重要

if ( select3.options[select3.selectedIndex].value == "選択" ){
select4.options[0] = new Option( "クエスト番号を選択", "選択" );
}

else if ( select3.options[select3.selectedIndex].value == "2-1" ){
for( i  in mainQuesNumtVal2_1 ){
select4.options[i] = new Option( mainQuestNumText2_1[i], mainQuesNumtVal2_1[i] );
}
}
else{
select4.options[0] = new Option( "クエスト番号を選択", "選択" );
}
}



HTML
<head>内
<script src="./javascript/setdifficulty.js" charset="UTF-8"></script>
<script src="./javascript/setstage.js" charset="UTF-8"></script>
<script src="./javascript/setquest.js" charset="UTF-8"></script>
<script src="./javascript/setquestnum.js" charset="UTF-8"></script>

<body>

<body onLoad="setStage(); setQuest(); setDifficulty(); setQuestNum();">

<form name="formStageQuest" method="post" action="./pathToProgramFile">
<!-- stage -->
<select name="stage" id="stage" onChange="setQuest(); setQuestNum()"></select>
<br>
<!-- quest -->
<select name="quest" id="quest" onChange="setQuestNum()"></select>
<br>
<!-- quest number -->
<select name="questnum" id="questnum"></select>
</form>


参考
デバッグは以下の方法を参考にしました。
JavaScriptのデバッグが捗る!コンソールにログを出力する方法


----------


Twitterやっています。ぜひチェックしてみてください。


ブログランキングに参加してます。よろしければポチっとお願いします。
ブログランキング・にほんブログ村へにほんブログ村
人気ブログランキング