Home >  > 全国城市列表（读取JS文件写入HTML）

全国城市列表（读取JS文件写入HTML）

0
| |

一、项目需求
想在网页上显示中国城市列表，而且需要将城市名都存在JS文件中。在网上找了一圈，拿别人的东西改了一下，基本上达到了自己的效果：

二、代码
html代码：

查看源代码
打印帮助
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>城市选择的三种实现</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9<div>
10    <fieldset>
11        <legend>方法三：按字母顺序选中城市</legend>
12        <label for="addr-show03">您选择的是：
13            <input type="text" id="addr-show03">
14        </label>
15        <div id="data-wrap">
16            <ul id="data-order">
17                <li value='0'>热门</li>
18                <li value='1'>ABCD</li>
19                <li value='2'>EFGH</li>
20                <li value='3'>JKLM</li>
21                <li value='4'>NPQR</li>
22                <li value='5'>STWX</li>
23                <li value='6'>YZ</li>
24                <li value='7'>YZ</li>
25                <li value='8'>YZ</li>
26                <li value='9'>YZ</li>
27                <li value='10'>YZ</li>
28            </ul>
29            <div id="data-show"></div>
30        </div>
31    </fieldset>
32</div>
33<script src="city02.js"></script>
34<script src="method01.js"></script>
35<script src="method03.js"></script>
36</body>
37</html>

JS的代码：

查看源代码
打印帮助
1var addrShow03 = $('addr-show03');
2var dataOrder = $('data-order').querySelectorAll('li');
3var dataShow = $('data-show');
4 
5(function init() {
6    showHotCity();
7})();
8 
9/*自动加载所有城市*/
10function showHotCity() {
11    for (var i = 0; i < 380; i++) {
12        dataOrder[i].className = 'cityOn';
13        var citysLen = cityAll[i].citys.length;
14        var dl = document.createElement('dl');
15        var dt = document.createElement('dt');
16        dt.innerText = cityAll[i].name;
17        var dd = document.createElement('dd');
18        dl.appendChild(dt);
19        dl.appendChild(dd);
20         
21 
22        for (var n = 0; n < citysLen; n++) {
23            var aCity = document.createElement('a');
24            aCity.innerText = cityAll[i].citys[n];
25            dd.appendChild(aCity);
26        }
27        dataShow.appendChild(dl);
28    }
29}

三、成果展示：

四、存在问题
JS文件中有一句

查看源代码
打印帮助
1var dataOrder = $('data-order').querySelectorAll('li');

是生成一个nodelist的，我直接改成array不行，所以在html那里重复写了很多li元素。

源码：

01省市区三级联动

五、根据省份取城市名称

查看源代码
打印帮助
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>根据省份选择城市</title>
6    <link rel="stylesheet" href="style.css">
7</head>
8<body>
9<h2>选择省份之后显示该省下所有城市</h2>
10<div id="div1"></div>
11<hr>
12<h2>选择城市之后显示该城市下所有县区</h2>
13<div id="div2"></div>
14<script src="city.js"></script>
15 
16<script type="text/javascript">
17 
18/*选择省份之后显示该省下所有城市,index应该为数值*/
19function showcityinp(index) {   
20    var cityLen = provice[index].city.length;
21    for (var j = 0; j < cityLen; j++) {       
22        var x = provice[index].city[j].name;       
23        var para = document.createElement("p");
24        var node = document.createTextNode(x);
25        para.appendChild(node);
26        var element = document.getElementById("div1");
27        element.appendChild(para);
28    }
29}
30showcityinp(4)
31 
32 
33 
34/*选择城市之后显示该城市下所有县区*/
35function showCountry2(provid,cityid) {
36    var cityLen = provice[provid].city.length;
37    if (cityid > cityLen) {
38        document.write("cityid超出范围")
39    }else {
40    var countryLen = provice[provid].city[cityid].districtAndCounty.length;
41    for (var k = 0; k < countryLen; k++) {
42        var x = provice[provid].city[cityid].districtAndCounty[k];       
43        var para = document.createElement("p");
44        var node = document.createTextNode(x);
45        para.appendChild(node);
46        var element = document.getElementById("div2");
47        element.appendChild(para);
48        }
49    }
50}
51 
52showCountry2(4,3)
53</script>
54</body>
55</html>

成果展示 ：

源码下载：
citylist

可参考网站：https://github.com/visugar/FrontEnd-examples

暧昧帖

本文暂无标签

发表评论

*

*