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

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



セレクトボックス内のオプション要素を追加
JavaScript
function setDifficulty(){ //難易度を選択

var select = document.getElementById( "difficulty" ); //セレクトボックスのIDを取得
//値を入力
var difficultyElementText = new Array (
"難易度を選択", "小女(ガール)級", "公主(プリンセス)級"
);
var difficultyElementVal = new Array (
"選択", "ガール", "プリ"
  );

for( var i in difficultyElementVal ) {
var option = document.createElement( "option" ) ; //ここで<option>要素を作成
option.value = difficultyElementVal[i]; //optionのvalue属性を設定
option.innerHTML = difficultyElementText[i]; //リストに表示するテキストを記述
select.appendChild( option ); //セレクトボックスにoptionを追加
}

for( var i in stageElementVal ) {
var option = document.createElement( "option" ) ; //ここで<option>要素を作成

option.value = stageElementVal[i]; //optionのvalue属性を設定
option.innerHTML = stageElementText[i]; //リストに表示するテキストを記述

select.appendChild( option ); //セレクトボックスにoptionを追加
}
}
HTML
<head>内
<script src="./javascript/setdifficulty.js" charset="UTF-8"></script>
<body>
<body onLoad="setDifficulty()">
<form name="formDifficulty" method="post" action="./pathToProgramFile">
<h3 class="tag">難易度</h3>
<select name="difficulty" id="difficulty"></select>
</form>

選択肢によってドロップダウンの内容を変える
JavaScript
function setQuest(){ //クエストを選択
var select1 = document.forms.formStageQuest.stage; //変数select1を宣言
var select2 = document.forms.formStageQuest.quest; //変数select2を宣言

//コロッセオ
var colosseumText = new Array (
"コーデコロッセオ", "麗しき美女", "オフィスの女王", "華麗な女王", "宮廷舞踏会", "キュートな大人女子", "Xmasのホームパーティー", 
"ゴールデンホール", "サマーストーリー", "スポーツタイム", "絶世の麗人", "夏のガーデンパーティー", "春の香り", "春のピクニック",
"ビーチパーティーコーデ", "フェアリーガーデン", "冬の炎", "名探偵ホームズ"
);
var colosseumVal = new Array (
"コロッセオ", "麗しき", "オフィス", "華麗", "宮廷舞踏会", "大人", "Xmas", "ゴールデン", "サマー","スポーツ", "絶世", "ガーデン", "春", 
"ピクニック", "ビーチ", "フェアリー", "冬", "名探偵"
);

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

if ( select1.options[select1.selectedIndex].value == "選択" ) {
select2.options[0] = new Option("クエストを選択", "選択");
}
else if ( select1.options[select1.selectedIndex].value == "コロッセオ" ) {
for ( i in colosseumVal ) {
select2.options[i] = new Option( colosseumText[i], colosseumVal[i] );
}
}
else {
select2.options[0] = new Option("クエストを選択", "選択");
}
}
HTML
<head>内
<script src="./javascript/setquest.js" charset="UTF-8"></script>
<body>
<form name="formStageQuest" method="post" action="./pathToProgramFile">
<!-- stage -->
<select name="stage" id="stage" onChange="setQuest()"></select>
<br>
</form>


コードチェックは以下を使用しました。
jswatchdog(JavaScript コードチェッカー)


参考
javascriptを用いて1~10を選べるプルダウンを作りたい。
select内のoption要素(セレクトボックス)をJavaScriptで追加していく
セレクトボックスの操作
【メモ】プルダウンメニューにおける選択した選択肢の取得(JavaScript, addEventListener, changeイベント)
選択肢によってドロップダウンのメニュー項目を変えるには
二つ以上の関数を呼び出すには


----------


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


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