zoukankan      html  css  js  c++  java
  • 省、市、地区三级联动

    一、首先,页面加载的时候,把省级信息查询出来,放进页面中

        

    <li>
         <span style="215px;">所属城市:</span>
         <select id="pro" name="province" class="select_2" onchange="setLianDong('pro')">
              <option value="">请选择省</option>
              <#list provinceList as item>
                <option value="${item.xingZhengQuHuaDaiMa}">${item.xingZhengQuHuaName}</option>
              </#list>
         </select>
         <select class="select_2" id="city" name="city" onchange="setLianDong('city')">
              <option value="">请选择城市</option>
         </select>
                        
          <select class="select_2" id="area" name="area">
              <option value="">请选择区县</option>
          </select>
    </li>

    二、省级触发onchange事件,根据行政区划代码查询市级信息,返回到页面中

    function setLianDong(param){
        var paramVal = $("#"+param).val();
        $.ajax({
            type:'post',
            dataType : "json",
            url:"${base}/joinIn/xingZhengQuHuaList?paramVal="+paramVal,
            success:function(data){
                if(param=='pro'){
                    $("#city").empty();
                    $("#city").append('<option value="" selected="selected">请选择城市</option>');
                    $.each(data, function(i, val){
                        $("#city").append('<option value='+val.xingZhengQuHuaDaiMa+'>'+val.xingZhengQuHuaName+'</option>');
                    });
                }else if(param=='city'){
                    $("#area").empty();
                    $("#area").append('<option value="" selected="selected">请选择地区</option>');
                    $.each(data, function(i, val){
                        $("#area").append('<option value='+val.xingZhengQuHuaDaiMa+'>'+val.xingZhengQuHuaName+'</option>');
                    });
                }
            }
        });
    }

      

  • 相关阅读:
    Java WebSocket通信Demo
    JAVA FTP/SFTP 上传下载文件
    SpringMVC+MyBatis 事务中 基于注解的声明式事务
    Java 调用支付宝接口
    linux安装Tomcat
    使用cxf发布restful的webservice
    restful的webservice
    oracle时间比较和分页查询
    jenkins问题
    linux安装jenkins
  • 原文地址:https://www.cnblogs.com/irishua/p/11428654.html
Copyright © 2011-2022 走看看