文章目录
json介绍json实现省市级联
json介绍
Json是前端中常用的格式(JavaScript Object Notation, JS 对象标记)Json是js中的对象 可以通过对象.属性的方法获取值
json实现省市级联
<!DOCTYPE html
>
<html
>
<head
>
<meta charset
="utf-8">
<title
></title
>
<script src
="js/jquery-3.4.1.min.js" type
="text/javascript" charset
="utf-8"></script
>
<script src
="js/addr.js" type
="text/javascript" charset
="utf-8"></script
>
<script
>
$(function() {
var selectedCity
;
$
.each(temp
, function(i
, d
) {
var myoption
= '<option value="' + d
.code
+ '">' + d
.label
+ '</option>';
$("#selprov").append(myoption
);
})
$("#selprov").change(function() {
console
.log($(this).val());
var provcode
= $(this).val();
$("#selcity").html('<option>---------请选择--------</option>');
$("#selcoun").html('<option>---------请选择--------</option>');
$
.each(temp
, function(i
, d
) {
if (d
.code
== provcode
) {
selectedCity
= d
.children
;
$
.each(d
.children
, function(i
, d
) {
var myoption
= '<option value="' + d
.code
+ '">' + d
.label
+ '</option>';
$("#selcity").append(myoption
);
})
}
})
})
$("#selcity").change(function() {
console
.log($(this).val());
var cityCode
= $(this).val();
$("#selcoun").html('<option>---------请选择--------</option>');
$
.each(selectedCity
, function(i
, d
) {
if (d
.code
== cityCode
) {
$
.each(d
.children
, function(i
, d
) {
var myoption
= '<option value="' + d
.code
+ '">' + d
.label
+ '</option>';
$("#selcoun").append(myoption
);
})
}
})
})
})
</script
>
</head
>
<body
>
<select id
="selprov">
<option
>---------请选择
--------</option
>
</select
>
<label
>省
</label
>
<select id
="selcity">
<option
>---------请选择
--------</option
>
</select
>
<label
>市
</label
>
<select id
="selcoun">
<option
>---------请选择
--------</option
>
</select
>
<label
>县
</label
>
</body
>
</html
>
