JSON
程序员文章站
2024-02-26 18:23:52
...
文章目录
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>
上一篇： SQLServer之创建提交读