javascript 雙重下拉選單
先選取主選項，隨即於次選單中顯示主選項的所有項次
效果演示：
HTML：
<!doctype html>
<html lang="zh-Hant-TW">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>雙重下拉選單</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container my-5">
<div class="row d-flex justify-content-center">
<div class="col-10">
<h3>雙重下拉選單</h3>
</div>
<div class="col-10 mt-3">
<div class="form-group">
<label for="saint_clothing_type">型態</label>
<select id="main_menu" name="saint_clothing_type" class="form-control">
<option value="">請選擇</option>
<option value="青銅聖衣">青銅聖衣</option>
<option value="暗黑聖衣">暗黑聖衣</option>
<option value="白銀聖衣">白銀聖衣</option>
<option value="黃金聖衣">黃金聖衣</option>
</select>
</div>
</div>
<div class="col-10 mt-3">
<div class="form-group">
<label for="saint_clothing_type">聖衣</label>
<select id="sub_menu" name="saint_clothing_type" class="form-control">
<option value="">請先選擇型態</option>
</select>
</div>
</div>
</div>
</div>
</body>
Javascript：
var saints = {
青銅聖衣: ['天馬座', '天龍座', '白鳥座', '仙女座', '鳳凰座'],
暗黑聖衣: ['黑天馬', '黑天龍', '黑天鵝', '暗黑仙女', '黑鳳凰'],
白銀聖衣: ['天鷹座', '蛇夫座', '蜥蜴座', '白鯨座', '烏鴉座', '英仙座', '御夫座'],
黃金聖衣: ['白羊座', '金牛座', '雙子座', '巨蟹座', '射手座', '獅子座', '處女座', '天秤座', '天蝎座', '山羊座', '水瓶座', '雙魚座'],
};
//取得兩個選單
var main = document.getElementById('main_menu');
var sub = document.getElementById('sub_menu');
//設定監聽器
main.addEventListener('change', function () {
//取得被選中的值
var selected_option = saints[this.value];
//清空副選單現有的值
while (sub.options.length > 0) {
sub.options.remove(0);
}
//列出副選單新的值
Array.from(selected_option).forEach(function (el) {
let option = new Option(el, el);
sub.appendChild(option);
});
});
來源：
分享這篇PO文
迴響列表
目前還沒有任何留言
留言表單