直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#container{
width: 500px;
min-height: 300px;
background-color: lightgreen;
margin: auto;
text-align: center;
padding: 10px;
}
</style>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(function(){
// 公用方法
function queryData(obj,callback){
$.ajax({
type:'get',
url:'http://localhost/summary/select.php',//数据地址
data:obj,
dataType:'json',
success:function(data){
callback(data);
}
});
}
// 加载省级数据
queryData({
flag:1
},function(data){
var option = '';
$.each(data,function(i,e){
option += '<option value="'+e.id+'">'+e.province+'</option>';
});
$("#province").append(option);
});
$('#province').change(function(){
// $("#city").find('option:gt(0)').remove();
$("#city option:gt(0)").remove();
queryData({
flag:2,
pId:$(this).val()
},function(data){
var option = '';
$.each(data,function(i,e){
option += '<option value="'+e.id+'">'+e.city+'</option>';
});
$("#city").append(option);
});
});
$('#city').change(function(){
// $("#city").find('option:gt(0)').remove();
$("#county option:gt(0)").remove();
queryData({
flag:3,
cId:$(this).val()
},function(data){
var option = '';
$.each(data,function(i,e){
option += '<option value="'+e.id+'">'+e.county+'</option>';
});
$("#county").append(option);
});
});
});
</script>
</head>
<body>
<div id="container">
<label>
省:<select id="province">
<option>请选择省...</option>
</select>
</label>
<label>
市:<select id="city">
<option>请选择市...</option>
</select>
</label>
<label>
县:<select id="county">
<option>请选择县...</option>
</select>
</label>
</div>
</body>
</html>