这里只是示例，没有具体省份城市信息

html内容：

 <div>
                省份：<select id="selProvince"></select>
                市/地区：<select id="selCity"></select>
                县/区：<select id="selDistrict"><option>=====</option></select>
            </div>

js代码：

 <script src="js/jquery-1.9.1.min.js" type="text/javascript" ></script>
    <script type="text/javascript">
        var areaData = {
            '==请选择省份==': {
                val: '',
                items: {
                    '==请选择区县==': { val: '', items: {'==请选择==':''} }
                    }
           },
            '北京': {
                val: '1',
                items: {
                    '所辖区': { val: '11', items: { '东城区': '111', '西城区': '112', '海淀区': '113', '通州区': '114' } },
                    '所辖县': { val: '12', items: { '密云县': '121', '延庆县': '122' } }
                }//end items
            },//end 北京

            '上海': {
                val: '2',
                items: {
                    '所辖区': { val: '21', items: { '黄浦区': '211', '浦东新区': '212', '徐汇区': '213', '静安区': '214', '普陀区': '215', '闸北区': '216' } },
                    '所辖县': { val: '22', items: { '崇明县': '121' } }
                }//end items
            },//end 上海
            '天津': {
                val: '3',
                items: {
                    '所辖区': { val: '31', items: { '和平区': '311', '河西区': '312', '南开区': '313', '河东区': '314' } },
                    '所辖县': { val: '32', items: { '蓟县': '321', '宁河县': '322', '静海县': '323' } }
                }//end items
            }//end 天津

        };//end areaData

$(function () {
            var sel1 = $("#selProvince");
            var sel2 = $("#selCity");
            var sel3 = $("#selDistrict");
            sel1.empty();
            $.each(areaData, function (index,obj) {
                var data = eval(obj);
                SelappentTo(sel1, index, data.val, '');
            });

            $("#selProvince").change(function () {
                sel2.empty();
                var current_val = sel1.val();

                $.each(areaData, function(index, obj) {
                    if (obj.val == current_val) {
                        $.each(obj.items, function(index,obj) {
                            SelappentTo(sel2,index,obj.val,'');
                        });
                       
                    }
                });
                sel2.change();
            }).change();

            $("#selCity").change(function () {
                sel3.empty();
                var cityVal = sel2.val();

                $.each(areaData, function(index, obj) {
                    if (obj.items) {
                        var areaItems = eval(obj.items);
                        $.each(areaItems, function(index, obj) {
                            if (obj.val == cityVal) {
                                var lastItems = eval(obj.items);
                                $.each(lastItems, function(index, obj) {
                                    SelappentTo(sel3, index, obj, '');
                                });
                            }
                        });
                    }

                });

            }).change();

            function SelappentTo(aimSel, index, val, selectedVal) {
                var str = "<option value='" + val + "'>" + index + "</option>";
                if (selectedVal == val) {
                    str = "<option value='" + val + "' selected='selected'>" + index + "</option>";
                }
                $(str).appendTo(aimSel);
            }

        });
    </script>