備忘録&雑記

JavaScriptメモ

以下のページで使用した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>
<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のデバッグが捗る!コンソールにログを出力する方法



広告





広告



関連記事

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

コメントするためには、 ログイン してください。