js 三级联动篇
来源:互联网 发布:linux操作系统入门 编辑:程序博客网 时间:2024/05/22 08:29
1. html 代码,比较简单。
<div>
<p>国家</p><select class="form-control" id="country" name="Country"></select>
</div>
<div>
<p>城市</p><select class="form-control" id="province" name="Province">
</select>
</div>
<div>
<p>省份</p><select class="form-control" id="city" name="City">
</select>
</div>
<div>
<p>区县</p> <select class="form-control" id="county" name="County">
</select>
</div>
2. 拿到后台的数据进行渲染个input框
$.ajax({
type: "GET",
url:'http://www.e-harbour.net/Service_Platform/country.do',
async:false,
dataType:"JSONP",
success:function(obj){
console.log(obj);
if(obj["error_code"] == 0){
$.each(obj.data, function(key, data) {
$("#country").append("<option value=" + data.countryId + ">" + data.countryName + "</option>");
})
}
}
}).then(function(){
return $.ajax({
url: "http://www.e-harbour.net/Service_Platform/province/1.do",
type: "get",
dataType: "jsonp",
success: function(result) {
if(result["error_code"] == 0){
$.each(result.data, function(key, data) {
$("#province").append("<option value=" + data.provinceId + ">" + data.provinceName + "</option>");
})
}
}
})
}).then(function(){
return $.ajax({
url: "http://www.e-harbour.net/Service_Platform/city/110000.do",
type: "get",
dataType: "jsonp",
success: function(result) {
console.log(result)
if(result["error_code"] == 0){
$.each(result.data, function(key, data) {
$("#city").append("<option value=" + data.cityId + ">" + data.cityName + "</option>");
})
}
}
})
}).then(function(){
return $.ajax({
url: "http://www.e-harbour.net/Service_Platform/county/110100.do",
type: "get",
dataType: "jsonp",
success: function(result) {
if(result["error_code"] == 0){
$.each(result.data, function(key, data) {
$("#county").append("<option value=" + data.countyId + ">" + data.countyName + "</option>");
})
}
}
})
});
3.进行判断
$("#country").change(function() {
$.ajax({
url: "http://www.e-harbour.net/Service_Platform/province/" + $("#country").val() + ".do",
type: "get",
dataType: "jsonp",
success: function(result) {
if(result["error_code"] == 0){
$("#province").html("<option value=''>请选择</option>");
$("#city").html("<option value=''>请选择</option>");
$("#county").html("<option value=''>请选择</option>");
$.each(result.data, function(key, data) {
$("#province").append("<option value=" + data.provinceId + ">" + data.provinceName + "</option>");
})
}else{
}
}
})
});
$("#province").change(function() {
$.ajax({
url: "http://www.e-harbour.net/Service_Platform/city/" + $("#province").val() + ".do",
type: "get",
dataType: "jsonp",
success: function(result) {
console.log(result)
if(result["error_code"] == 0){
$("#city").html("<option value=''>请选择</option>");
$("#county").html("<option value=''>请选择</option>");
$.each(result.data, function(key, data) {
$("#city").append("<option value=" + data.cityId + ">" + data.cityName + "</option>");
})
}else{
}
}
})
4.说明:第一个只有中国,所以没判断,2.代码没有优化,大家可以看看,有意见就在评论中说,菜鸟谢谢大家(2017.10.13 北京)
- js 三级联动篇
- JS 三级联动菜单
- JS三级联动选单
- JS三级联动
- js省市区三级联动
- js三级联动
- Js三级联动菜单
- Js三级联动例子
- js省市三级联动
- js 三级联动
- JS三级联动
- js 城市三级联动
- js三级联动
- js省市区三级联动
- js三级联动代码
- js年月日三级联动
- JS省市区三级联动
- js实现三级联动
- js复制文本到剪贴板
- 仿一个简单动态tomcat
- 文章标题
- 二叉树 二叉树带虚结点表示的先序遍历可以确定唯一一颗二叉树
- window配置hosts
- js 三级联动篇
- 结构体与函数
- SSM框架的搭建(Spring+SpringMVC+Mybatis+DB2)
- Apache Kylin在百度地图的实践
- GBDT和RF
- mybatis批量修改 (update的值也是动态的)
- 使用kindeditor和Struts开发时遇到错误
- 第九章作业
- git rebase 使用详解