3个下拉菜单的联动选择 jquery 下拉菜单三级联动 js 下拉框三级联动

写这个的时候用的框架是jquery easyui+ibatis，选择省市区之后，可以保存，查看的时候可以看到选择的省市区。

1，js：
/**
表单提交
             */
            function onSub(){
判断验证是否通过
            var flag = isValid("customerForm");
if(!flag){
return;
}
//保存区域信息
var pCode = $('#province').val();
var cCode = $('#city').val();
var dCode = $('#district').val();
var pName ;
var cName ;
var dName ;
 
var selectprovince =  document.getElementById("province");
var selectcity =  document.getElementById("city");
var selectdistrict =  document.getElementById("district");
 
for(i = 0;i<selectprovince.options.length;i++){
     if(selectprovince.options[i].value == pCode){
         pName = selectprovince.options[i].text;
     }
}
for(i = 0;i<selectcity.options.length;i++){
     if(selectcity.options[i].value == cCode){
         cName = selectcity.options[i].text;
     }
}
for(i = 0;i<selectdistrict.options.length;i++){
     if(selectdistrict.options[i].value == dCode){
         dName = selectdistrict.options[i].text;
     }
}
var areaCode = pCode+','+cCode;
保存的区域名称为省+市+区
                
$('#areaCode').attr('value',dCode);
$('#parentCode').attr('value',areaCode);
    $('#areaName').attr('value',areaName);
//获取表单数据，封装成json格式
            var params = createFormParamsJson("customerForm","");
            $.ajax({
        type : 'POST',
        url : rootPath+'/baseinfo/customer_insertOrUpdate.action',
        async : false,
        data : params,
        dataType : 'json',
        beforeSend :　function(){
        showLoadDiv();
        },
        success :　function(data){
        hideLoadDiv();
        $.messager.confirm('提示','操作已成功，是否继续编辑证件信息？',function(r){
             if(r){
                      $("#customerId").val(data['id']);
        证件管理');
                             }else{
                             parent.hideUIWindow("uiwindow");
            parent.refreshTable();
            parent.toBack();
                             }
        });
   
        },
        error : function(data){
        hideLoadDiv();
        alert("操作失败！");
        }
        });
            }
 
//清空下拉列表
function clearSelect(select){
while(select.childNodes.length>0)
{
select.removeChild(select.childNodes[0]);
}
            }
//获得省
function getProvince(){
       var param = {parentAreaCode:0,orderLevel:1};
       var url = rootPath+'/baseinfo/customer_selectArea.action?parentAreaCode=0&orderLevel=1';
$.ajax({
 type: "POST",
 contentType: "application/json",
 url: url,
 data: param,
 async: false,
 success: function(data){
          var provinceList = new Array();
          provinceList = data['rows'];
          var provinceCode = document.getElementById("province");
          clearSelect(provinceCode);
          for(var i=0;i<provinceList.length;i++){
               var lable = provinceList[i].areaName;
               var value = provinceList[i].areaCode;
       var option = new Option(lable,value);
               provinceCode.options.add(option);
               getCity();
          }
 
         }
 });
}
//获得市
function getCity(){
     var provinceCode = $('#province').val();
     var param = {parentAreaCode:provinceCode,orderLevel:1};
       var url = rootPath+'/baseinfo/customer_selectArea.action?parentAreaCode='+provinceCode+'&orderLevel=2';
$.ajax({
 type: "POST",
 contentType: "application/json",
 url: url,
 data: param,
 async: false,
 success: function(data){
          var cityList = new Array();
          cityList = data['rows'];
          var city = document.getElementById("city");
          clearSelect(city);
          for(var i=0;i<cityList.length;i++){
               var lable = cityList[i].areaName;
               var value = cityList[i].areaCode;
       var option = new Option(lable,value);
               city.options.add(option);
               getDistrict();
          }
 
         }
 });
}
获得区
function getDistrict(){
     var districtCode = $('#city').val();
     var param = {parentAreaCode:districtCode,orderLevel:1};
     var url = rootPath+'/baseinfo/customer_selectArea.action?parentAreaCode='+districtCode+'&orderLevel=3';
$.ajax({
 type: "POST",
 contentType: "application/json",
 url: url,
 data: param,
 async: false,
 success: function(data){
          var districtList = new Array();
          districtList = data['rows'];
          var district = document.getElementById("district");
          clearSelect(district);
          for(var i=0;i<districtList.length;i++){
               var lable = districtList[i].areaName;
               var value = districtList[i].areaCode;
       var option = new Option(lable,value);
               district.options.add(option);
          }
 
         }
 });
}
 
//查看时，根据后台传递的code，设置下拉框被选中
function makeAreaSelect(){
    codes = $('#parentCode').val();
    areaCode = $('#areaCode').val();
    index = codes.indexOf(",");
获得省和市的code
    var provinceCode = codes.substring(0,index);
    var cityCode = codes.substring(index+1,codes.length);
    var selectprovince =  document.getElementById("province");
    
选中省
for(i = 0;i<selectprovince.options.length;i++){
     if(selectprovince.options[i].value == provinceCode){
         selectprovince.options[i].selected = true;
        var selectcity =  document.getElementById("city");
    清空市下拉框
        clearSelect(selectcity);
        getCity();
//选中市
for(j = 0;j<selectcity.options.length;j++){
     if(selectcity.options[j].value == cityCode){
         selectcity.options[j].selected = true;
      var selectdistrict =  document.getElementById("district");
//选中区
for(k = 0;k<selectdistrict.options.length;k++){
     if(selectdistrict.options[k].value == areaCode){
         selectdistrict.options[k].selected = true;
     }
}
     }
}
     }
}
2，html：
      <td align="right"><nobr>区域</nobr></td>
    <td>
      <select name="province" id="province" style="width:60" onchange="getCity()">
      </select>
               <select name="city" id="city" style="width:60"onchange="getDistrict()">
      </select>
      <select name="district" id="district" style="width:60">
      </select>
      <input type="hidden"name="areaCode"id="areaCode"value="${requestScope.customer.areaCode}"/>
      <input type="hidden" name="parentCode"id="parentCode"value="${requestScope.customer.parentCode}"/>
      <input type="hidden" name="areaName"id="areaName"value="${requestScope.customer.areaName}"/>
    </td>