前述:终于抽出时间,整理了一些编程所需基础知识。
请提前看:
1、《js基础-select选择标签》https://blog.csdn.net/xysxlgq/article/details/119580815
2、《js读取本地json文件》https://blog.csdn.net/xysxlgq/article/details/119568570
中国城市筛选:
方法二:js中国城市筛选
先看效果:
1、先生成省份信息;
2、选择需要的省份后城市列中生成城市数据。
主要code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中国城市筛选</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
中国城市:
<div>
省份:<select class="st_css_province" id="st_id_province" onchange="st_province()"></select>
城市:<select class="st_css_city" id="st_id_city"></select>
</div>
<script type="text/javascript">
var select = document.getElementById('st_id_province');
var city = document.getElementById('st_id_city');
var json;//必须异步才可定全局变量。
$.ajax({
url: "ChinaCity.json",
type: "get",
dataType: "json",
async: false,//异步
success: function (data) {
json = data;
}
});
var jsonobj = eval(json.provinces);
//省份
var option = document.createElement('option');
option.value = "--------请选择:--------";
option.innerText = "--------请选择:--------";
select.appendChild(option);
for (i = 0; i < jsonobj.length; i++) {
var option = document.createElement('option');
var province = jsonobj[i].provinceName;
option.value = province;
option.innerText = province;
select.appendChild(option);
}
//城市
function st_province() {
var value = select.options[select.selectedIndex].value;
if (select.selectedIndex > 0) {
city.length=0;
var option = document.createElement('option');
option.value = "--------请选择:--------";
option.innerText = "--------请选择:--------";
city.appendChild(option);
for (i = 0; i < jsonobj.length; i++) {
if (jsonobj[i].provinceName == value) {
if (jsonobj[i].citys.length > 0) {
for (citysvalue in jsonobj[i].citys) {
var cityname = jsonobj[i].citys[citysvalue].citysName;
var option = document.createElement('option');
option.value = cityname;
option.innerText = cityname;
city.appendChild(option);
}
}
}
}
}
}
</script>
</body>
</html>
json格式如:
json城市文件:
<script type=
"text/javascript"
src=
"http://www.shicishu.com/down/provincecity.data.min.js"
></script>
<script type=
"text/javascript"
src=
"http://www.shicishu.com/down/provincecity.min.js"
></script>