今天學習了如何用js實現下拉框的聯動，下拉框聯動主要指的是當一個下拉框的內容改變時另一個下拉框的內容也會相應的發生改變。比如，我么有時在注冊時會需要添加籍貫，當我們選擇相應的省份之后，后面的市區也會相應的發生改變，這就是聯動。下面是我實現此功能的代碼，是通過視頻學習之后自己做出相應改變之后寫出的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function fn(){
var select=document.getElementById("city");
var c=select.value;
var area=document.getElementById("area");
switch(c)
{
case "jx": area.innerHTML="<option>撫州市</option><option>南昌市</option><option>贛州市</option><option>宜春市</option>";
break;
case "gd":area.innerHTML="<option>廣州市</option><option>韶關市</option><option>佛山市</option><option>東莞市</option>";
break;
case "fj":area.innerHTML="<option>泉州市</option><option>廈門市</option><option>福州市</option><option>漳州市</option>";
break;
case "hn":area.innerHTML="<option>長沙市</option><option>湘潭市</option><option>樂昌市</option><option>郴州市</option>";
break;
default:alert("error");
}
};
</script>
</head>
<body>
<select id="city" onchange="fn()">
<option value="jx">江西</option>
<option value="gd">廣東</option>
<option value="fj">福建</option>
<option value="hn">湖南</option>
</select>
<select id="area">
<option>撫州市</option>
<option>南昌市</option>
<option>贛州市</option>
<option>宜春市</option>
</select>
</body>
</html>
下面是實現效果截圖：
運行之后第一個下拉框默認選擇的是江西省，第二個下拉框默認選擇的是撫州市，當點擊第一個下拉框選擇福建省時，第二個下拉框會自動變成福建省的市區，其次我選擇泉州市。
實現過程（個人理解）：
首先在在html部分寫兩個下拉框，第一個代表省份，id名設置為city;第二個下拉框代表市區，id名為area。在city下拉框添加一個onchange事件,事件源是下拉框內容發生改變，響應事件是名字為fn的一個函數，該事件發生即下拉框的省份發生改變之后會觸發該事件，然后跳轉到fn函數，執行fn函數的內容，fn函數中，首先通過document.getElementById("city")
來獲取id名為cit的對象，即第一個下拉框並將該對象重新命名為select,通過select.value來獲取該下拉框內的內容，即你所選取省份的內容，比如"jx" "fj" "gd"
等等，並將該內容值賦值給c變量，通過document.getElementById("area");來獲取第二個下拉框對象，並命名為area;再次是通過一個switch語句來選擇第二個下拉框的內容，當獲取的c的值為“jx”時，執行
case "jx": area.innerHTML="<option>撫州市</option><option>南昌市</option><option>贛州市</option><option>宜春市</option>";
break;
DOM的innerHTML屬性可以用來獲取或設置對象的內容。