<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
font-size: 13px;
}
h3{
padding: 0px;
margin: 8px 0;
}
.iframe {
width: 360px;
border: 1px solid #666666;
}
.iframe .title{
padding: 5px;
background-color: #EEEEEE;
}
.iframe .content{
padding: 8px;
font-size: 12px;
}
</style>
<script src="../js/jquery-3.5.1.js"></script>
<script>
var AreaData = {
"省份": { val:"",items:{"城市":{val:"",items :{"县区":""}}}},
"北京市":{ val:"01",items:{ "所辖区":{ val:"0101",items:{"东城区":"010101","西城区":"010102"}}, "所辖县":{ val:"0102",items:{"密云县":"010201","延庆县":"010202"}}}},
"天津市":{ val:"02",items:{ "所辖区":{ val:"0201",items:{"和平区":"020101","河东区":"020102"}}, "所辖县":{ val:"0202",items:{"宁河县":"020201","静海县":"020202"}}}}
};
$(function () {
var $sel1 = $("#select1"); //省
var $sel2 = $("#select2"); //市
var $sel3 = $("#select3"); //县
var $t1 = $("#tip");
var $t2 = ""; //提示字符串
var value1 = "01"; //匹配值
var value2 = "0101";
var value3 = "010101";
//先绑定省、市、县
$.each(AreaData,function (key, value) {
appendOpTo($sel1,key,value.val,value1);
});
//绑定下拉框的方法
function appendOpTo($object, key, value, defaultValue) {
//生成option节点,添加文本,添加值
var $opt = $("<option>").text(key).val(value);
//如果值与匹配值相等,此项被选中
if(value == defaultValue)
{
$opt.attr("selected","true");
}
//将option追加至对应的下拉框
$opt.appendTo($object);
};
//省,下拉框变化
$sel1.change(function () {
$sel2.html(""); //先清空,市,县
$sel3.html(""); //
if(this.selectedIndex == -1) return;
//取得被选中的值,和文本
var sel1_curr_val = this.options[this.selectedIndex].value;
var sel1_curr_txt = this.options[this.selectedIndex].text;
//
$.each(AreaData,function (key, value) {
//如果省的值与数组的值相等
if(sel1_curr_val == value.val)
{
//并且有items
if(value.items)
{
//将值绑定至市下拉框
$.each(value.items,function (key, value) {
appendOpTo($sel2,key,value.val,value2);
});
}
}
});
$t2 = sel1_curr_txt;
$t1.html($t2);
$sel2.change();
});
$sel2.change(function () {
$sel3.html("");
var sel1_curr_val = $sel1[0].options[$sel1[0].selectedIndex].value;
if(this.selectedIndex == -1) return;
var sel2_curr_val = this.options[this.selectedIndex].value;
$.each(AreaData,function (key, value) {
if(sel1_curr_val == value.val)
{
if(value.items)
{
$.each(value.items,function (key, value) {
if(sel2_curr_val == value.val)
{
$.each(value.items,function (key, value) {
appendOpTo($sel3,key,value,value3);
});
}
});
}
}
});
showChangeItem();
}).change();
$sel3.change(function () {
showChangeItem();
});
//获取省市县下拉框的选中文本,生成提示
function showChangeItem() {
var sel1_curr_txt = $sel1[0].options[$sel1[0].selectedIndex].text;
var sel2_curr_txt = $sel2[0].options[$sel2[0].selectedIndex].text;
var sel3_curr_txt = $sel3[0].options[$sel3[0].selectedIndex].text;
$t2 = "你选择的是:" + sel1_curr_txt + ">" + sel2_curr_txt + ">" + sel3_curr_txt;
$t1.html($t2);
}
});
</script>
</head>
<body>
<div class="iframe">
<div class="title">请选择省市:
<select id="select1" name="select1"></select>
<select id="select2" name="select2"></select>
<select id="select3" name="select3"></select>
</div>
<div class="content">
<div id="tip"></div>
</div>
</div>
</body>
</html>