JavaScript二級聯動是一種常見的交互式功能，它通過兩個或多個下拉框之間的互相關聯，實現對數據的動態篩選和展示。在實際的應用中，二級聯動功能可以被廣泛用于地區選擇、商品分類、婚姻狀況等場景下。
簡單來說，當我們從第一個下拉框中選擇一個選項時，會觸發第二個下拉框對應選項的顯示，同時根據所選條件動態加載數據。
<html>
<head>
<script type="text/javascript">
function changeCity(sel){
var index = sel.selectedIndex;
var province = sel.options[index].value;
var cityList = document.getElementById("city");
cityList.length = 0;
if(province == "江蘇省"){
cityList.add(new Option("南京市", "南京市"));
cityList.add(new Option("蘇州市", "蘇州市"));
} else if (province == "浙江省"){
cityList.add(new Option("杭州市", "杭州市"));
cityList.add(new Option("寧波市", "寧波市"));
} else {
cityList.add(new Option("請選擇市", "請選擇市"));
}
}
</script>
</head>
<body>
<select onchange="changeCity(this);" id="province">
<option value="江蘇省">江蘇省</option>
<option value="浙江省">浙江省</option>
</select>
<select id="city">
<option value="請選擇市">請選擇市</option>
</select>
</body>
</html>以上是一個簡單的 JavaScript 二級聯動下拉框的實現代碼。首先，我們需要兩個下拉框：一個用于選擇省份，另一個用于選擇城市。省份被選中后，城市下拉框會在其選項中顯示對應城市，而城市所顯示的選項則會根據省份的不同而動態變化。
在這段代碼中，我們使用了onchange事件來監聽省份下拉框的選擇。通過該事件，選中省份的選項后，changeCity函數會被自動觸發，該函數中我們使用了selectedIndex來獲取當前選中的索引值，然后利用value獲取對應省份的名稱。最后，我們根據不同的省份來動態添加對應城市的選項。
總的來說，JavaScript二級聯動可以為用戶提供更加便捷和快速的交流體驗，特別是在需要選擇大量地區信息或分類信息時，通過簡單明了的選項就能找到對應的數據，避免了翻頁的麻煩。
上一篇div 隨意拖動