省市区县三级联动实现

最新推荐文章于 2022-11-29 12:07:45 发布

weixin_30258901

最新推荐文章于 2022-11-29 12:07:45 发布

阅读量514

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/libf/p/7505245.html

版权

简单功能以备后用！！！

                <tr>
                <td align="right"><label class="Validform_label"> 所在省:
                </label></td>
                <td class="value"><select name="province" id="province"
                    onchange="proget(this.value)">
                        <option value="">-- 请选择 --</option>
                        <c:forEach var="pro" items="${provinceList}">
                            <option
                                <c:if test="${supplier.province eq pro.provinceid}"> selected="selected" </c:if>
                                value="${pro.provinceid }"><t:mutiLang
                                    langKey="${pro.province}" /></option>
                        </c:forEach>
                </select></td>
                </tr>
                <tr>
                <td align="right"><label class="Validform_label"> 所在市:
                </label></td>
                <td class="value"><select name="city" id="city"
                    onchange="cityget(this.value)">
                </select></td>
                </tr>
                <tr>
                <td align="right"><label class="Validform_label"> 所在区县:
                </label></td>
                <td class="value"><select name="area" id="area">
                </select></td>
                </tr>



//得到从控制器传来的数据
    $(function() {
        var province = '${supplier.province}';
        proget(province);
        var cityId = '${supplier.city}';
        cityget(cityId);
    });
    //级联市
    function proget(id) {
        $
                .ajax({
                    url : "addressController.do?cityget",
                    data : {
                        id : id
                    },
                    type : 'POST',
                    error : function() {// 请求失败处理函数
                    },
                    success : function(data) {
                        
                        var json = eval('(' + data + ')');
                        var cityId = $('#cityId').val();
                        var htmlV = "<option value=''>--请选择 --</option>";
                        var htmlV2 = "<option value=''>--请选择 --</option>";
                        for (var i = 0; i < json.length; i++) {
                            
                            if (json[i].cityid == cityId) {
                                htmlV = htmlV
                                        + "<option selected='selected' value='"+json[i].cityid+"'><t:mutiLang langKey='"+json[i].city+"' /></option>";
                            } else {
                                htmlV = htmlV
                                        + "<option value='"+json[i].cityid+"'><t:mutiLang langKey='"+json[i].city+"' /></option>";
                            }

                        }
                        $("#city").html(htmlV);
                        $("#area").html(htmlV2);
                    }
                });
    }
    //级联区县
    function cityget(id) {
    
        $
                .ajax({
                    url : "addressController.do?areaget",
                    data : {
                        id : id
                    },
                    type : 'POST',
                    error : function() {// 请求失败处理函数
                    },
                    success : function(data) {
                        var areaId = $('#areaId').val();
                        var json = eval('(' + data + ')');
                        //    areaId
                        var htmlV = "<option value=''>--请选择 --</option>";
                        for (var i = 0; i < json.length; i++) {
                            if (json[i].areaid == areaId) {
                                htmlV = htmlV
                                        + "<option selected='selected' value='"+json[i].areaid+"'><t:mutiLang langKey='"+json[i].area+"' /></option>";
                            } else {
                                htmlV = htmlV
                                        + "<option value='"+json[i].areaid+"'><t:mutiLang langKey='"+json[i].area+"' /></option>";
                            }

                        }
                        $("#area").html(htmlV);
                    }
                });
    }