標籤：var pad 南京 str [] select 瞭解 option UNC
需求：實現地址選擇聯動
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>地址聯動</title> <style> select { width: 100px; padding: 5px; font-size:16px; } </style></head><body> <h1>選擇地址</h1> <hr> <select id="prov"></select> <select id="city"></select> <script> //定義省市的資訊 var provList = [‘江蘇‘,‘浙江‘,‘福建‘,‘湖南‘]; var cityList = []; cityList[0] = [‘南京‘, ‘蘇州‘, ‘宿遷‘, ‘揚州‘]; cityList[1] = [‘杭州‘, ‘溫州‘, ‘寧波‘, ‘台州‘]; cityList[2] = [‘福州‘, ‘廈門‘, ‘泉州‘, ‘漳州‘]; cityList[3] = [‘長沙‘, ‘湘潭‘, ‘株洲‘, ‘湘西‘]; //擷取select元素 var provSelect = document.querySelector(‘#prov‘); var citySelect = document.querySelector(‘#city‘); //把省的資訊 添加到第一個select元素中 provList.forEach(function(val, index){ //DOM操作 瞭解 provSelect.add(new Option(val, index)) }); //給第一個select綁定change事件 provSelect.onchange = function(){ //擷取 當前的選項 var index = this.value; //清空第二個select原先內容 citySelect.length = 0; //選擇對應的城市列表，添加到第二個select cityList[index].forEach(function(val, index){ citySelect.add(new Option(val, index)); }) } //手工觸發一次 change事件 provSelect.onchange(); </script></body></html>
【HTML+CSS+JavaScript】實現地址選擇聯動
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
