版权声明：本文为大都督作者的原创文章，未经 大都督 允许也可以转载，但请注明出处，谢谢！ 共勉！ https://blog.csdn.net/qq_37335220/article/details/85408849
1. 效果图
2. html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>45 jQuery-三级联动展示数据</title>
<style type="text/css">
body{font-size:13px}
.clsInit{width:435px;height:35px;line-height:35px;padding-left:10px}
.clsTip{padding-top:5px;background-color:#eee;
display:none}
.btn {border:#666 1px solid;padding:2px;width:65px;
float:right;margin-top:6px;margin-right:6px;
filter: progid:DXImageTransform.Microsoft.
Gradient(GradientType=0,StartColorStr=#ffffff,
EndColorStr=#ECE9D8);}
</style>
</head>
<body>
<div class="clsInit">
省份：<select id="selF"><option>请选择</option></select>
城市：<select id="selT"><option>请选择</option></select>
区域：<select id="selC"><option>请选择</option></select>
<input id="Button1" type="button" value="查询" class="btn" />
</div>
<div class="clsInit" id="divTip"></div>
<script src="../jquery.min.js"></script>
<script type="text/javascript">
$(function() {
function objInit(obj) {//下拉列表框初始化
return $(obj).html("<option>请选择</option>");
}
var arrData = { //定义一个数组保存相关数据
北京市: { 北京市: "东城区,西城区,朝阳区" },
天津市: { 天津市: "和平区,河东区"},
河北省: {
唐山市: "路南区,路北区",
承德市: "双桥区,双滦区" }
};
$.each(arrData, function(pF) { //遍历数据增加省份项
$("#selF").append("<option>" + pF + "</option>");
});
$("#selF").change(function() { //省份列表框选项改变事件
objInit("#selT");
objInit("#selC");
$.each(arrData, function(pF, pS) {
//如果省份选中项与数据匹配
if ($("#selF option:selected").text() == pF) {
//遍历数据增加城市项
$.each(pS, function(pT, pC) {
$("#selT").append("<option>" + pT +"</option>");
});
//城市列表框选项改变事件
$("#selT").change(function() {
objInit("#selC");
$.each(pS, function(pT, pC) {
//如果城市选中项与数据匹配
if ($("#selT option:selected").text() == pT) {
//遍历数据增加区县项
$.each(pC.split(","), function() {
$("#selC").append("<option>"
+ this + "</option>");
});
}
});
});
}
});
});
$("#Button1").click(function() { //注册按钮单击事件
var strValue = "您选择的省份是:";
strValue += $("#selF option:selected").text(); strValue += " 您选择的城市:";
strValue += $("#selT option:selected").text(); strValue += " 您选择的区县:";
strValue += $("#selC option:selected").text();
$("#divTip")
.show()
.addClass("clsTip")
.html(strValue);//显示提示信息并增加样式
});
})
</script>
</body>
</html>