ajax数据库交互 三级联动下拉框 问题
rt,我是利用ajax和数据库交互然后显示三级联动(省市区)二级和三级是用js来Add上去,数据是从数据库里抓的。在本地运行当然是很快,但是发布在服务器上不知道为什么要等好久,具体情况就是假如我选择广东省,然后市级那里要等半天才显示出来,现在到底是神马情况。
[解决办法]
为什么分3次?1次足够了
[解决办法]
如果是省市的话建议不要用数据库,因为远程的话读取数据库比较慢,建议使用json,如果不会的话我可以给你一个json的代码,你看看
<script type="text/javascript">
var pr = {head:[
{text:"北京市",id:"北京市"},
{text:"天津市",id:"天津市"},
{text:"河北省",id:"河北省"},
{text:"山西省",id:"山西省"},
{text:"内蒙古",id:"内蒙古"},
{text:"辽宁省",id:"辽宁省"},
{text:"吉林省",id:"吉林省"},
{text:"黑龙江",id:"黑龙江"},
{text:"上海市",id:"上海市"},
{text:"江苏省",id:"江苏省"},
{text:"浙江省",id:"浙江省"},
{text:"安徽省",id:"安徽省"},
{text:"福建省",id:"福建省"},
{text:"江西省",id:"江西省"},
{text:"山东省",id:"山东省"},
{text:"河南省",id:"河南省"},
{text:"湖北省",id:"湖北省"},
{text:"湖南省",id:"湖南省"},
{text:"广东省",id:"广东省"},
{text:"广西省",id:"广西省"},
{text:"海南省",id:"海南省"},
{text:"重庆市",id:"重庆市"},
{text:"四川省",id:"四川省"},
{text:"贵州省",id:"贵州省"},
{text:"云南省",id:"云南省"},
{text:"西藏省",id:"西藏省"},
{text:"陕西省",id:"陕西省"},
{text:"甘肃省",id:"甘肃省"},
{text:"青海省",id:"青海省"},
{text:"宁夏省",id:"宁夏省"},
{text:"新疆省",id:"新疆省"},
{text:"香港省",id:"香港省"},
{text:"澳门省",id:"澳门省"},
{text:"台湾省",id:"台湾省"}
]};
var city = {head:[
{text:"天津市",id:"天津市",pid:"天津市"},
{text:"石家庄市",id:"石家庄市",pid:"河北省"},
{text:"唐山市",id:"唐山市",pid:"河北省"},
{text:"秦皇岛市",id:"秦皇岛市",pid:"河北省"},
{text:"邯郸市",id:"邯郸市",pid:"河北省"},
{text:"邢台市",id:"邢台市",pid:"河北省"},
{text:"保定市",id:"保定市",pid:"河北省"},
{text:"张家口市",id:"张家口市",pid:"河北省"},
{text:"承德市",id:"承德市",pid:"河北省"},
{text:"沧州市",id:"沧州市",pid:"河北省"},
{text:"廊坊市",id:"廊坊市",pid:"河北省"},
{text:"衡水市",id:"衡水市",pid:"河北省"},
{text:"太原市",id:"太原市",pid:"山西省"},
{text:"大同市",id:"大同市",pid:"山西省"},
{text:"阳泉市",id:"阳泉市",pid:"山西省"},
{text:"吕梁市",id:"吕梁市",pid:"山西省"},
{text:"呼和浩特",id:"呼和浩特",pid:"内蒙古"},
{text:"包头市",id:"包头市",pid:"内蒙古"},
{text:"乌海市",id:"乌海市",pid:"内蒙古"},
{text:"赤峰市",id:"赤峰市",pid:"内蒙古"},
{text:"通辽市",id:"通辽市",pid:"内蒙古"},
{text:"鄂尔多斯",id:"鄂尔多斯",pid:"内蒙古"},
{text:"呼伦贝尔",id:"呼伦贝尔",pid:"内蒙古"},
{text:"巴彦淖尔",id:"巴彦淖尔",pid:"内蒙古"},
{text:"乌兰察布",id:"乌兰察布",pid:"内蒙古"},
{text:"兴安盟",id:"兴安盟",pid:"内蒙古"},
{text:"锡林郭勒盟",id:"锡林郭勒盟",pid:"内蒙古"},
{text:"阿拉善盟",id:"阿拉善盟",pid:"内蒙古"},
{text:"沈阳市",id:"沈阳市",pid:"辽宁省"},
{text:"大连市",id:"大连市",pid:"辽宁省"},
{text:"鞍山市",id:"鞍山市",pid:"辽宁省"},
{text:"抚顺市",id:"抚顺市",pid:"辽宁省"},
{text:"本溪市",id:"本溪市",pid:"辽宁省"},
{text:"葫芦岛",id:"葫芦岛",pid:"辽宁省"},
{text:"长春市",id:"长春市",pid:"吉林省"},
{text:"吉林市",id:"吉林市",pid:"吉林省"},
{text:"四平市",id:"四平市",pid:"吉林省"},
{text:"延边",id:"延边",pid:"吉林省"},
{text:"哈尔滨",id:"哈尔滨",pid:"黑龙江"},
{text:"齐齐哈尔",id:"齐齐哈尔",pid:"黑龙江"},
{text:"大兴安岭",id:"大兴安岭",pid:"黑龙江"},
{text:"上海市",id:"上海市",pid:"上海市"},
{text:"宿迁市",id:"宿迁市",pid:"江苏省"},
{text:"杭州市",id:"杭州市",pid:"浙江省"},
{text:"丽水市",id:"丽水市",pid:"浙江省"},
{text:"合肥市",id:"合肥市",pid:"安徽省"},
{text:"芜湖市",id:"芜湖市",pid:"安徽省"},
{text:"蚌埠市",id:"蚌埠市",pid:"安徽省"},
{text:"淮南市",id:"淮南市",pid:"安徽省"},
{text:"黄山市",id:"黄山市",pid:"安徽省"},
{text:"滁州市",id:"滁州市",pid:"安徽省"},
{text:"亳州市",id:"亳州市",pid:"安徽省"},
{text:"池州市",id:"池州市",pid:"安徽省"},
{text:"宣城市",id:"宣城市",pid:"安徽省"},
{text:"福州市",id:"福州市",pid:"福建省"},
{text:"宁德市",id:"宁德市",pid:"福建省"},
{text:"南昌市",id:"南昌市",pid:"江西省"},
{text:"景德镇市",id:"景德镇市",pid:"江西省"},
{text:"萍乡市",id:"萍乡市",pid:"江西省"},
{text:"九江市",id:"九江市",pid:"江西省"},
{text:"新余市",id:"新余市",pid:"江西省"},
{text:"鹰潭市",id:"鹰潭市",pid:"江西省"},
{text:"赣州市",id:"赣州市",pid:"江西省"},
{text:"吉安市",id:"吉安市",pid:"江西省"},
{text:"宜春市",id:"宜春市",pid:"江西省"},
{text:"抚州市",id:"抚州市",pid:"江西省"},
{text:"上饶市",id:"上饶市",pid:"江西省"},
{text:"荷泽市",id:"荷泽市",pid:"山东省"},
{text:"郑州市",id:"郑州市",pid:"河南省"},
{text:"开封市",id:"开封市",pid:"河南省"},
{text:"商丘市",id:"商丘市",pid:"河南省"},
{text:"信阳市",id:"信阳市",pid:"河南省"},
{text:"周口市",id:"周口市",pid:"河南省"},
{text:"驻马店",id:"驻马店",pid:"河南省"},
{text:"武汉市",id:"武汉市",pid:"湖北省"},
{text:"黄石市",id:"黄石市",pid:"湖北省"},
{text:"十堰市",id:"十堰市",pid:"湖北省"},
{text:"恩施土家族",id:"恩施土家族",pid:"湖北省"},
{text:"神农架",id:"神农架",pid:"湖北省"},
{text:"长沙市",id:"长沙市",pid:"湖南省"},
{text:"株洲市",id:"株洲市",pid:"湖南省"},
{text:"湘潭市",id:"湘潭市",pid:"湖南省"},
{text:"衡阳市",id:"衡阳市",pid:"湖南省"},
{text:"邵阳市",id:"邵阳市",pid:"湖南省"},
{text:"岳阳市",id:"岳阳市",pid:"湖南省"},
{text:"常德市",id:"常德市",pid:"湖南省"},
{text:"张家界",id:"张家界",pid:"湖南省"},
{text:"益阳市",id:"益阳市",pid:"湖南省"},
{text:"郴州市",id:"郴州市",pid:"湖南省"},
{text:"永州市",id:"永州市",pid:"湖南省"},
{text:"怀化市",id:"怀化市",pid:"湖南省"},
{text:"娄底市",id:"娄底市",pid:"湖南省"},
{text:"湘西土家族",id:"湘西土家族",pid:"湖南省"},
{text:"广州市",id:"广州市",pid:"广东省"},
{text:"韶关市",id:"韶关市",pid:"广东省"},
{text:"深圳市",id:"深圳市",pid:"广东省"},
{text:"珠海市",id:"珠海市",pid:"广东省"},
{text:"汕头市",id:"汕头市",pid:"广东省"},
{text:"佛山市",id:"佛山市",pid:"广东省"},
{text:"江门市",id:"江门市",pid:"广东省"},
{text:"中山市",id:"中山市",pid:"广东省"},
{text:"潮州市",id:"潮州市",pid:"广东省"},
{text:"揭阳市",id:"揭阳市",pid:"广东省"},
{text:"云浮市",id:"云浮市",pid:"广东省"},
{text:"来宾市",id:"来宾市",pid:"广西省"},
{text:"崇左市",id:"崇左市",pid:"广西省"},
{text:"海口市",id:"海口市",pid:"海南省"},
{text:"三亚市",id:"三亚市",pid:"海南省"},
{text:"重庆市",id:"重庆市",pid:"重庆市"},
{text:"成都市",id:"成都市",pid:"四川省"},
{text:"自贡市",id:"自贡市",pid:"四川省"},
{text:"广安市",id:"广安市",pid:"四川省"},
{text:"达州市",id:"达州市",pid:"四川省"},
{text:"雅安市",id:"雅安市",pid:"四川省"},
{text:"巴中市",id:"巴中市",pid:"四川省"},
{text:"资阳市",id:"资阳市",pid:"四川省"},
{text:"阿坝藏族",id:"阿坝藏族",pid:"四川省"},
{text:"甘孜藏族",id:"甘孜藏族",pid:"四川省"},
{text:"凉山彝族",id:"凉山彝族",pid:"四川省"},
{text:"贵阳市",id:"贵阳市",pid:"贵州省"},
{text:"六盘水",id:"六盘水",pid:"贵州省"},
{text:"遵义市",id:"遵义市",pid:"贵州省"},
{text:"安顺市",id:"安顺市",pid:"贵州省"},
{text:"铜仁地区",id:"铜仁地区",pid:"贵州省"},
{text:"黔西南布依族苗族",id:"黔西南布依族苗族",pid:"贵州省"},
{text:"毕节地区",id:"毕节地区",pid:"贵州省"},
{text:"黔东南苗族侗族",id:"黔东南苗族侗族",pid:"贵州省"},
{text:"黔南布依族苗族",id:"黔南布依族苗族",pid:"贵州省"},
{text:"昆明市",id:"昆明市",pid:"云南省"},
{text:"曲靖市",id:"曲靖市",pid:"云南省"},
{text:"玉溪市",id:"玉溪市",pid:"云南省"},
{text:"保山市",id:"保山市",pid:"云南省"},
{text:"昭通市",id:"昭通市",pid:"云南省"},
{text:"丽江市",id:"丽江市",pid:"云南省"},
{text:"思茅市",id:"思茅市",pid:"云南省"},
{text:"临沧市",id:"临沧市",pid:"云南省"},
{text:"楚雄彝族",id:"楚雄彝族",pid:"云南省"},
{text:"红河哈尼族彝族",id:"红河哈尼族彝族",pid:"云南省"},
{text:"文山壮族苗族",id:"文山壮族苗族",pid:"云南省"},
{text:"西双版纳傣族",id:"西双版纳傣族",pid:"云南省"},
{text:"大理白族",id:"大理白族",pid:"云南省"},
{text:"德宏傣族景颇族",id:"德宏傣族景颇族",pid:"云南省"},
{text:"怒江傈僳族",id:"怒江傈僳族",pid:"云南省"},
{text:"迪庆藏族",id:"迪庆藏族",pid:"云南省"},
{text:"拉萨市",id:"拉萨市",pid:"西藏省"},
{text:"昌都地区",id:"昌都地区",pid:"西藏省"},
{text:"山南地区",id:"山南地区",pid:"西藏省"},
{text:"日喀则地区",id:"日喀则地区",pid:"西藏省"},
{text:"那曲地区",id:"那曲地区",pid:"西藏省"},
{text:"阿里地区",id:"阿里地区",pid:"西藏省"},
{text:"林芝地区",id:"林芝地区",pid:"西藏省"},
{text:"西安市",id:"西安市",pid:"陕西省"},
{text:"铜川市",id:"铜川市",pid:"陕西省"},
{text:"宝鸡市",id:"宝鸡市",pid:"陕西省"},
{text:"咸阳市",id:"咸阳市",pid:"陕西省"},
{text:"渭南市",id:"渭南市",pid:"陕西省"},
{text:"延安市",id:"延安市",pid:"陕西省"},
{text:"汉中市",id:"汉中市",pid:"陕西省"},
{text:"榆林市",id:"榆林市",pid:"陕西省"},
{text:"安康市",id:"安康市",pid:"陕西省"},
{text:"商洛市",id:"商洛市",pid:"陕西省"},
{text:"兰州市",id:"兰州市",pid:"甘肃省"},
{text:"临夏回族",id:"临夏回族",pid:"甘肃省"},
{text:"甘南藏族",id:"甘南藏族",pid:"甘肃省"},
{text:"西宁市",id:"西宁市",pid:"青海省"},
{text:"海东地区",id:"海东地区",pid:"青海省"},
{text:"海北藏族",id:"海北藏族",pid:"青海省"},
{text:"黄南藏族",id:"黄南藏族",pid:"青海省"},
{text:"海南藏族",id:"海南藏族",pid:"青海省"},
{text:"果洛藏族",id:"果洛藏族",pid:"青海省"},
{text:"玉树藏族",id:"玉树藏族",pid:"青海省"},
{text:"海西蒙古族藏族",id:"海西蒙古族藏族",pid:"青海省"},
{text:"银川市",id:"银川市",pid:"宁夏省"},
{text:"石嘴山市",id:"石嘴山市",pid:"宁夏省"},
{text:"吴忠市",id:"吴忠市",pid:"宁夏省"},
{text:"固原市",id:"固原市",pid:"宁夏省"},
{text:"中卫市",id:"中卫市",pid:"宁夏省"},
{text:"乌鲁木齐市",id:"乌鲁木齐市",pid:"新疆省"},
{text:"克拉玛依市",id:"克拉玛依市",pid:"新疆省"},
{text:"吐鲁番地区",id:"吐鲁番地区",pid:"新疆省"},
{text:"哈密地区",id:"哈密地区",pid:"新疆省"},
{text:"昌吉回族",id:"昌吉回族",pid:"新疆省"},
{text:"博尔塔拉蒙古",id:"博尔塔拉蒙古",pid:"新疆省"},
{text:"巴音郭楞蒙古",id:"巴音郭楞蒙古",pid:"新疆省"},
{text:"阿克苏地区",id:"阿克苏地区",pid:"新疆省"},
{text:"克孜勒苏柯尔克孜",id:"克孜勒苏柯尔克孜",pid:"新疆省"},
{text:"喀什地区",id:"喀什地区",pid:"新疆省"},
{text:"和田地区",id:"和田地区",pid:"新疆省"},
{text:"伊犁哈萨克",id:"伊犁哈萨克",pid:"新疆省"},
{text:"塔城地区",id:"塔城地区",pid:"新疆省"},
{text:"阿勒泰地区",id:"阿勒泰地区",pid:"新疆省"},
{text:"石河子市",id:"石河子市",pid:"新疆省"},
{text:"阿拉尔市",id:"阿拉尔市",pid:"新疆省"},
{text:"图木舒克市",id:"图木舒克市",pid:"新疆省"},
{text:"五家渠市",id:"五家渠市",pid:"新疆省"},
{text:"香港区",id:"香港区",pid:"香港省"},
{text:"澳门区",id:"澳门区",pid:"澳门省"},
{text:"台湾省",id:"台湾省",pid:"台湾省"},
{text:"东城区",id:"东城区",pid:"北京市"},
{text:"西城区",id:"西城区",pid:"北京市"},
{text:"延庆县",id:"延庆县",pid:"北京市"}
]};
function addProvince(){
var select1 = document .getElementById("Province");
//select1.empty();
select1.options.length = 0;
select1.options.add(new Option("请选择", ""));
for(var i=0;i<pr.head.length;i++){
//$("<option value='" + pr.head[i].id + "'>" + pr.head[i].text + "</option>").appendTo(Province);
select1.options.add(new Option(pr.head[i].text, pr.head[i].id));
}
getCity("");
}
function getCity(Stra){
var select1Text = document.getElementById("Province").value;
var select2 = document.getElementById("City");
select2.options.length = 0;
if(Stra!="")
{
select2.options.add(new Option(Stra,Stra));
}
else{
select2.options.add(new Option("请选择", ""));
}
for(var i=0;i<city.head.length;i++){
if(select1Text==city.head[i].pid){
//$("<option value='" + city.head[i].id + "'>" + city.head[i].text + "</option>").appendTo(City);
select2.options.add(new Option(city.head[i].text,city.head[i].id ));
}
}
}
</script>
</head>
<body onLoad="addProvince()">
省份<select id="Province" name="staffProvince" onChange="getCity('')">
</select><br/>
城市<select id="City" name="staffCity"></select><br/>
</body>
</html>
上面是代码,因为字数限制,只能提供一部分省的一部分市的效果,网上可以查到省市的代码,如果担心省市变动,可以吧这两个json写在单独的两个js文件里面,用代码生成就行了
[解决办法]
[解决办法]