給大家分享一個省市區選擇框_js實現

運行效果：

=================================================

部分代碼：

=================================================

當然首先你數據庫中要有這個table，不然你沒有數據.....^_^

<tr>
                    <td class="tr pr10 ">
                    所在地:
                    </td>
                    <td class="tl">
                        <input type="hidden" id="myProvince" value="${user.provinceId}"/>
                        <input type="hidden" id="myCity" value="${user.cityId}"/>
                        <input type="hidden" id="myRegion" value="${user.regionId}"/>
                        <select id="provinceSelect" name="user.provinceId">
                          <c:forEach items="${xzqhs}" var="xzqh">
                          <option value="${xzqh.provinceId}" ${user.regionId eq xzqh.provinceId?"selected='selected'":""}>${xzqh.province}</option>
                          </c:forEach>
                        </select>
                        <select id="citySelect" name="user.cityId">
                        </select>
                        <select id="regionSelect" name="user.regionId">
                        </select>
                    </td>
                    <td class="gray"></td>
                </tr>

js代碼：

/**
 * 加載市
 * 
 */
function loadCity() {
    var provinceId = $("#provinceSelect option:selected").val();
    if(provinceId == null || provinceId == ""){
        //alert("找不到省");
    }else{
        $.post(rootPath+"/loadCity", {
            "q" : provinceId
        }, function(data, result) {
            if(data == "noId"){
                alert("請求錯誤");
            }else if(data == "null"){
                alert("系統找不到屬於該省的市");
            }else{
                data = eval("{" + data + "}");
                var citySelect = $("#citySelect");
                var myCity = $("#myCity").val();
                citySelect.html("");
                for ( var i = 0; i < data.length; i++) {
                    if(myCity != null && myCity != "" && myCity > 0 && myCity == data[i].id){
                        citySelect.append("<option selected='selected' value='" + data[i].id + "'>"
                                + data[i].name + "</option>");
                    }else{
                        citySelect.append("<option value='" + data[i].id + "'>"
                                + data[i].name + "</option>");
                    }
                }
                loadRegion();
            }
        });
    }
};

/**
 * 加載區
 * 
 */
function loadRegion() {
    var cityId = $("#citySelect option:selected").val();
    if(cityId == null || cityId == "" || cityId < 1){
        alert("找不到市");
    }else{
        $.post(rootPath+"/loadRegion", {
            "q" : cityId
        }, function(data, result) {
            if(data == "noId"){
                alert("請求錯誤");
            }else if(data == "null"){
                alert("系統找不到屬於該市的區");
            }else{
                data = eval("{" + data + "}");
                var regionSelect = $("#regionSelect");
                var myRegion = $("#myRegion").val();
                regionSelect.html("");
                for ( var i = 0; i < data.length; i++) {
                    if(myRegion != null && myRegion != "" && myRegion > 0 && myRegion == data[i].id){
                        regionSelect.append("<option selected='selected' value='" + data[i].id + "'>"
                                + data[i].name + "</option>");
                    }else{
                        regionSelect.append("<option value='" + data[i].id + "'>"
                                + data[i].name + "</option>");
                    }
                }
            }
        });
    }
};

/**
 * 省改變事件
 * 
 */
$("#provinceSelect").change(loadCity);

/**
 * 市改變事件
 *
 */
$("#citySelect").change(loadRegion);


$(function() {
    loadCity();
});


    
    
    

后台方法：

    /**
     * 加載城市數據
     * 
     */
    public void loadCity() {
        if (q == null || q.trim().equals("")) {
            write("noId");
        } else {
            List<Xzqh> citys = xzqhService.queryCitys(q.trim());
            if (citys == null || citys.size() < 1) {
                write("null");
            } else {
                StringBuilder builder = new StringBuilder("[");
                for (Xzqh city : citys) {
                    builder.append("{'id':'");
                    builder.append(city.getCityId());
                    builder.append("','name':'");
                    builder.append(city.getCity());
                    builder.append("'},");
                }
                if (builder.length() > 1)
                    builder.replace(builder.length() - 1, builder.length(), "]");
                write(builder.toString());
            }
        }
    }

    /**
     * 加載區數據
     * 
     */
    public void loadRegion() {
        if (q == null || q.trim().equals("")) {
            write("noId");
        } else {
            List<Xzqh> citys = xzqhService.queryDistricts(q.trim());
            if (citys == null || citys.size() < 1) {
                write("null");
            } else {
                StringBuilder builder = new StringBuilder("[");
                for (Xzqh district : citys) {
                    builder.append("{'id':'");
                    builder.append(district.getRegionId());
                    builder.append("','name':'");
                    builder.append(district.getRegion());
                    builder.append("'},");
                }
                if (builder.length() > 1)
                    builder.replace(builder.length() - 1, builder.length(), "]");
                write(builder.toString());
            }
        }
    }