當前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

【案例】城市地址三级联动

發布時間：2023/11/27 生活经验 33 豆豆

生活随笔收集整理的這篇文章主要介紹了【案例】城市地址三级联动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

注意點：

1、<option value=""></option>? ? value值的設置

2、select的onchange事件

<!DOCTYPE html>

<head>

??????? <meta charset="UTF-8">

??????? <title>城市地址三級聯動</title>

??????? <style>

???????????????? *{

???????????????????????? margin:0;

???????????????????????? padding:0;

???????????????? }

???????????????? #pro,#city,#county{

???????????????????????? width: 120px;

???????????????????????? height: 30px;

???????????????????????? margin-left: 10px;

???????????????????????? margin-top: 20px;

???????????????? }

???????????????? #city,#county{

???????????????????????? display: none;

???????????????? }

??????? </style>

???????

??????? <script src="./location.js"></script>

</head>

<body>

??????? <select name="" id="pro"></select>

??????? <select name="" id="city"></select>

??????? <select name="" id="county"></select>

</body>

??????? //獲取元素

??????? var pro = document.getElementById('pro');

??????? var city = document.getElementById('city');

??????? var county = document.getElementById('county');

??????? var proStr = '<option value="">請選擇</option>';

??????? for(var i in address[0]){

???????????????? proStr += '<option value="0,'+ i +'">'+ address[0][i] +'</option>';

??????? }

??????? pro.innerHTML = proStr;

??????? //省發生改變時，顯示相應的市

??????? pro.onchange = function(){

???????????????? city.style.display = 'inline-block';

???????????????? var cityStr = '<option value="">請選擇</option>';

???????????????? var index = this.value;

???????????????? if(index == ''){

???????????????????????? city.style.display = 'none';

???????????????????????? county.style.display = 'none';

???????????????????????? return;

???????????????? }

???????????????? for(var i in address[index]){

???????????????????????? cityStr += '<option value="'+ index +','+ i +'">'+ address[index][i] +'</option>';

???????????????? }

???????????????? city.innerHTML = cityStr;

??????? }

??????? //市發生改變時，顯示相應的縣

??????? city.onchange = function(){

???????????????? county.style.display = 'inline-block';

???????????????? var countyStr = '<option value="">請選擇</option>';

???????????????? var index = this.value;

???????????????? if(index == ''){

???????????????????????? county.style.display = 'none';

???????????????????????? return;

???????????????? }

???????????????? for(var i in address[index]){

???????????????????????? countyStr += '<option value="">'+ address[index][i] +'</option>';

???????????????? }

???????????????? county.innerHTML = countyStr;

??????? }

</script>

</html>

轉載于:https://www.cnblogs.com/sherryStudy/p/city_address3.html

總結

以上是生活随笔為你收集整理的【案例】城市地址三级联动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。