下拉框三级联动例子

写这个的时候用的框架是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;

                var areaName = pName+cName+dName;//保存的区域名称为省+市+区

                

$('#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']);

                  $('#suppliertabs').tabs('select','证件管理');

                             }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" οnchange="getCity()">
      </select>
               <select name="city" id="city" style="width:60"οnchange="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>

转载于:https://www.cnblogs.com/zhuzhiq/articles/2875712.html