<ul class="selBox">
  <li class="selList">
   <select name="provinceid" id="provinceid" >
    <option value='' disabled selected style='display:none;'>请选择省市/其他...</option> 
      </select>
  </li>
  <li class="selList">
   <select name="cityid" id="cityid" >
      <option value='' disabled selected style='display:none;'>请选择城市/其他...</option> 
  
   </select>
  </li>
  <li class="selList areaList">
   <select name="areaid" id="areaid" disabled="disabled">
        <option value='' disabled selected style='display:none;'>请选择县/区...</option> 
  
   
   </select>
  </li>
 </ul>

js  :

$("#provinceid").click(function(){
 $("#cityid").empty();
 $("#areaid").empty();
    $.ajax({
    type:"get",
    dataType:"json",
    async:false  ,
    contentType:"application/json;charset=utf-8",
    url:$("#basePath").val()+'/province/dataListJson.do',
    success:function(result){
       $.each(result,function(index,value){
        $("#provinceid").append("<option value='"+value.id+"'>"+value.name+"</option>");
        if ($("#provinceid option:contains('" + value.name + "')").length > 1){
               $("#provinceid option:contains('" + value.name + "'):gt(0)").remove();
        }
        })
    },
    error : function(XMLHttpRequest, textStatus, errorThrown) {
        alert(errorThrown);
     },
   });
})

  $("#cityid").click(function(){
 $("#areaid").empty();
   var provinceid=$("#provinceid").val();
     if(provinceid != null && provinceid !=''){
          $.ajax({
        required:true,
        disabled:false,
        valueField:'id',
        textField:'name',
         async:false  ,
        url:$("#basePath").val()+'/city/dataListJson.do?provinceid='+provinceid,
        success:function(result){
           $.each(result,function(index,value){
             $("#cityid").append("<option value='"+value.id+"'>"+value.name+"</option>");
             if ($("#cityid option:contains('" + value.name + "')").length > 1){
                    $("#cityid option:contains('" + value.name + "'):gt(0)").remove();
             }})
          },
         error : function(XMLHttpRequest, textStatus, errorThrown) {
             alert(errorThrown);
          }
       });
     
    }})
     $("#areaid").click(function(){
        var cityId=$("#cityid").val();
      if(cityId != null && cityId !=''){
         $.ajax({
      required:true,
      disabled:false,
      valueField:'id',
      textField:'name',
      async:false  ,
      url:$("#basePath").val()+'/area/dataListJson.do?cityid='+cityId,
      success:function(result){
          $.each(result,function(index,value){
           $("#areaid").append("<option value='"+value.id+"'>"+value.name+"</option>");
                if ($("#areaid option:contains('" + value.name + "')").length > 1){
                        $("#areaid option:contains('" + value.name + "'):gt(0)").remove();
                 }
               })},
              error : function(XMLHttpRequest, textStatus, errorThrown) {
                  alert(errorThrown);
               }
    });
  }})