learn-javascript @ ウィキ
画面表示
最終更新：
learn-javascript
-
view
目次
2つのドロップダウンを連動させて一方の項目名を変更する
2つのドロップダウンを並べて配置し、片方のドロップダウンで項目を選んだら、それに連動させてもう一方のドロップダウンの項目名を入れ替える方法。以下、作成例。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<select id="seiyu">
<option value="" selected>声優を選択してください</option>
<option value="miwami">石見舞菜香</option>
<option value="mnakajima">中島愛</option>
<option value="rnoguchi">野口瑠璃子</option>
<option value="kyasuno">安野希世乃</option>
<option value="kyuki">優木かな</option>
</select>
<select id="chara">
<option value="" selected>－</option>
</select>
<script>
document.getElementById('seiyu').onchange = function () {
chara = document.getElementById('chara');
chara.options.length = 0;
let s = [];
switch (seiyu.value) {
case '':
s = ['－'];
break;
case 'miwami':
s = ['ライスシャワー', '黒川あかね', 'マーシル'];
break;
case 'mnakajima':
s = ['ランカ・リー', '宇佐美綾乃'];
break;
case 'rnoguchi':
s = ['サクラチヨノオー', 'ポルテ'];
break;
case 'kyasuno':
s = ['カナメ・バッカニア', 'コマさぶろう'];
break;
case 'kyuki':
s = ['スーパークリーク'];
break;
default:
return;
break;
}
for (let i = 0; i < s.length; i++) {
let opt = document.createElement('option');
opt.value = s[i];
opt.text = s[i];
chara.appendChild(opt);
}
}
</script>
</body>
</html>初期状態では右側のドロップダウンには何も表示されないが、左側のドロップダウンから項目を選ぶと、それに応じて右側のドロップダウンの項目が変わることがわかる。
#ref error ：ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (./JavaScript_ChangeDropDown1.png) |
#ref error ：ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (./JavaScript_ChangeDropDown2.png) |
#ref error ：ご指定のファイルが見つかりません。ファイル名を確認して、再度指定してください。 (./JavaScript_ChangeDropDown3.png) |
