<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<body>
<div>
<ul id="package">
</ul>
</div>
<div>
<ul id="price">
</ul>
</div>
<div>
<ul id="details">
</ul>
</div>
<script>
var city = [
{
"id": 10002,
"name": "陕西省",
"child": [
{
"id": 100011,
"name": "西安市",
"child_name": "高新区",
},
{
"id": 100012,
"name": "宝鸡市",
"child_name": "新区",
}
]
},
{
"id": 10001,
"name": "湖北省",
"child": [
{
"id": 100011,
"name": "咸宁市",
"child_name": "崇阳",
}
],
},
{
"id": 10002,
"name": "陕西省",
"child": [
{
"id": 100011,
"name": "西安市",
"child_name": "高新区",
},
{
"id": 100012,
"name": "宝鸡市",
"child_name": "新区",
}
]
},
{
"id": 10003,
"name": "甘肃省",
"child": [
{
"id": 100021,
"name": "兰州市",
"child_name": "兰州区",
},
{
"id": 100022,
"name": "酒泉市",
"child_name": "酒泉区",
}
]
}
]
$(document).ready(function () {
// $("#price-radio").hide();
for (var i = 0; i < city.length; i++) {
var package_r = "<input id = 'do_package' type='radio' name='id' value=" + city[i].id + " package_id=" + i + ">"
var content = $("<span></span>").text(city[i].name);
$("#package").append(package_r, content);
$("#do_package").prop("checked", true);
}
});
$(document).ready(function () {
var child = city[0]['child'];
if (child.length < 2) {
//添加span
var content_p = $("<span></span>").text(child[0].name);
var content_p_s = $("<span></span>").text(child[0].child_name);
$("#price").append(content_p);
$("#details").append(content_p_s);
} else {
//添加radio
for (var j = 0; j < child.length; j++) {
var price_r = "<input id = 'do_price' type='radio' name='id_p' value=" + child[j].id + " price_id=" + j + " package_id=" + 0 + ">"
var content_p = $("<span></span>").text(child[j].name);
$("#price").append(price_r, content_p);
$("#do_price").prop("checked", true);
}
var content_p_s = $("<span></span>").text(child[0].child_name);
$("#details").append(content_p_s);
}
});
//单选转换(一级)
$('body').on('change', '#do_package', function () {
//清除元素
$("#price").empty();
$("#details").empty();
var package_id = $(this).attr("package_id");
//判断数组长度
var content = city[package_id]['child'];
var length = city[package_id]['child'].length;
if (length < 2) {
//添加span
var content_p = $("<span></span>").text(content[0].name);
var content_p_s = $("<span></span>").text(content[0].child_name);
$("#price").append(content_p);
$("#details").append(content_p_s);
} else {
//添加radio
for (var k = 0; k < content.length; k++) {
var price_r = "<input id = 'do_price' type='radio' name='id_p' value=" + content[k].id + " price_id=" + k + " package_id=" + package_id + ">"
var content_p = $("<span></span>").text(content[k].name);
$("#price").append(price_r, content_p);
$("#do_price").prop("checked", true);
}
var content_p_s = $("<span></span>").text(content[0].child_name);
$("#details").append(content_p_s);
}
});
//二级切换
$('body').on('change', '#do_price', function () {
//清除元素
$("#details").empty();
var price_id = $(this).attr("price_id");
var package_id = $(this).attr("package_id");
// //填充详情
var content = city[package_id]["child"][price_id];
var content_p_s = $("<span></span>").text(content.child_name);
$("#details").append(content_p_s);
});
</script>
</body>
</html>
网友评论