原生的js聯動
代碼部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>聯動</title>
<script type="text/javascript">
function fn() {
var select = document.getElementById("type");
var c = select.value;
var area = document.getElementById("area");
switch (c) {
case "fruit": area.innerHTML = "<option>蘋果</option><option>橘子</option><option>梨</option><option>桃</option>";
break;
case "animal": area.innerHTML = "<option>老虎</option><option>獅子</option><option>大象</option><option>猴子</option>";
break;
case "plant": area.innerHTML = "<option>月季</option><option>菊花</option><option>鬱金香</option><option>松樹</option>";
break;
default: alert("error");
}
};
</script>
</head>
<body>
<select id="type" οnchange="fn()">
<option value="fruit">水果</option>
<option value="animal">動物</option>
<option value="plant">植物</option>
</select>
<select id="area">
<option>蘋果</option>
<option>橘子</option>
<option>梨</option>
<option>桃</option>
</select>
</body>
</html>