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>');
                    });
                }
            }
        });
    }

      

  • 相关阅读:
    VS操作Sqlite数据库
    Sqlite官方下载对应版本注意细节
    样式
    移动端问题
    table最终版IE(浏览器中宽度不起作用)
    pointer-event:none;在IE浏览器中不起作用
    伪类的使用
    针对谷歌浏览器写的css样式
    IE浏览器中textarea有滚动条出现
    父级元素被子元素的margin-top值影响的解决方案
  • 原文地址:https://www.cnblogs.com/irishua/p/11428654.html
Copyright © 2011-2022 走看看