js 三级联动篇

                   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  北京）