刘小春的主页

帮趣游戏     进入个人中心
人人网 新浪微博 豆瓣网 QQ空间

刘小春

sql

正能量,向太阳!帮趣你要加油!

http://bangqu.com/sql

职业: 网页重构

现居: 山西省长治市

  • 浏览 812次
  • 感谢 0人
  • 收益 ¥0.0元

jquery 城市三级联动

分享一个jqury 城市三级联动解决办法


/*html*/
<div class="controls">
    <select class="bor validate[required]" id="provinceId"
        name="provinceId" onChange="changeCity(this,'cityId');">
        <option value="">
            请选择省
        </option>
            <option value="110000">
                北京市
            </option>
                                                                                    
            <option value="120000">
                天津市
            </option>
    </select>
    <select class="bor validate[required]" id="cityId"
        name="cityId" onChange="changeDistrict(this);">
        <option value="">
            请选择市
        </option>
    </select>
    <select class="bor validate[required]" id="districtId"
        name="districtId">
        <option value="">
            请选择区
        </option>
    </select>
</div>



//script
var cityArray = new Array();
    cityArray[110000] = [{
        name: "北京市",
        value: "110100"
    }, ];
    cityArray[120000] = [{
        name: "天津市",
        value: "120100"
    }, ];
function changeCity(selObj, cityId) {
    var provinceId = $("#provinceId").val();
    $('#cityId').empty();
    $('#cityId').append('<option value="">请选择市</option>');
    $.each(cityArray[provinceId], function(n, value) {
        $('#cityId').append('<option value="' + value.value + '">' + value.name + ' </option>');
    });
}
var districtArray = new Array();
    districtArray[110100] = [
                           {name:"东城区", value:"110101"},
                           {name:"西城区", value:"110102"},
                           {name:"崇文区", value:"110103"},
                           {name:"宣武区", value:"110104"},
                           {name:"朝阳区", value:"110105"},
                           {name:"丰台区", value:"110106"},
                           {name:"石景山区", value:"110107"},
                           {name:"海淀区", value:"110108"},
                           {name:"门头沟区", value:"110109"},
                           {name:"房山区", value:"110111"},
                           {name:"通州区", value:"110112"},
                           {name:"顺义区", value:"110113"},
                           {name:"昌平区", value:"110114"},
                           {name:"大兴区", value:"110115"},
                           {name:"怀柔区", value:"110116"},
                           {name:"平谷区", value:"110117"},
                           {name:"密云县", value:"110228"},
                           {name:"延庆县", value:"110229"},
                           {name:"其它区", value:"110230"}];
                                                            
                                                              
                           districtArray[120100] = [
                           {name:"和平区", value:"120101"},
                           {name:"河东区", value:"120102"},
                           {name:"河西区", value:"120103"},
                           {name:"南开区", value:"120104"},
                           {name:"河北区", value:"120105"},
                           {name:"红桥区", value:"120106"},
                           {name:"塘沽区", value:"120107"},
                           {name:"汉沽区", value:"120108"},
                           {name:"大港区", value:"120109"},
                           {name:"东丽区", value:"120110"},
                           {name:"西青区", value:"120111"},
                           {name:"津南区", value:"120112"},
                           {name:"北辰区", value:"120113"},
                           {name:"武清区", value:"120114"},
                           {name:"宝坻区", value:"120115"},
                           {name:"宁河县", value:"120221"},
                           {name:"静海县", value:"120223"},
                           {name:"蓟县", value:"120225"},
                           {name:"其它区", value:"120226"}];
function changeDistrict(selObj) {
    var cityId = $("#cityId").val();
    $('#districtId').empty();
    $('#districtId').append('<option value="">请选择区</option>');
    $.each(districtArray[cityId], function(n, value) {
        $('#districtId').append('<option value="' + value.value + '">' + value.name + ' </option>');
    });
}


分享时间: