definitely:三个下拉框,两个change事件
<div id="app">
province:
<select id="provinceid">
<option> 空</option>
</select>
<hr>
city:
<select id="cityid">
<option> 空</option>
</select>
<hr>
country:
<select id="countryid">
<option> 空</option>
</select>
</div>
初始下 下拉框,非常简单
$(document).ready(function(){
$.ajax({
url:"getCity",
data:"",
success:function(returnStr){
ajaxReturnStr=returnStr;
console.log(ajaxReturnStr);
$.each(ajaxReturnStr,function(index,json){
var optionDom="<option value="+json.id+">"+json.cityname+"</option>";
$("#provinceid").append(optionDom);
});//each
},
async : false,
error : function(){
}
});//ajax
});
省联动,change事件
//js,jquery, es6
$("#provinceid").change(function(){
var pid=$("#provinceid").val();//所选择省份的id
$("#cityid").empty();
$("#cityid").append("<option> 空</option>");
$.ajax({
url:"getCity?pid="+pid,
data:"",
success:function(returnStr){
ajaxReturnStr=returnStr;
console.log(ajaxReturnStr);
$.each(ajaxReturnStr,function(index,json){
var optionDom="<option value="+json.id+">"+json.cityname+"</option>";
$("#cityid").append(optionDom);
});//each
},
async : false,
error : function(){
}
});//ajax
});
$("#cityid").change(function(){
var pid=$("#cityid").val();//所选择省份的id
$("#countryid").empty();
$("#countryid").append("<option> 空</option>");
$.ajax({
url:"getCity?pid="+pid,
data:"",
success:function(returnStr){
ajaxReturnStr=returnStr;
console.log(ajaxReturnStr);
$.each(ajaxReturnStr,function(index,json){
var optionDom="<option value="+json.id+">"+json.cityname+"</option>";
$("#countryid").append(optionDom);
});//each
},
async : false,
error : function(){
}
});//ajax
});
--增加的时候,三级联动,需要在数据库设计为三个字段还是一个字段
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。