1、页面及级联js
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>省市二级联动菜单Demo</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
cities = new Object();
cities['北京'] = new Array('北京-101010100');
cities['上海'] = new Array('上海-101020100');
cities['天津'] = new Array('天津-101030100');
cities['重庆'] = new Array('重庆-101040100');
cities['河北省'] = new Array('石家庄-101090101', '张家口-101090301', '承德-101090402', '秦皇岛-101091101', '唐山-101090501', '廊坊-101090601', '保定-101090201', '沧州-101090701','衡水-101090801', '邢台-101090901', '邯郸-101091001');
cities['山西省'] = new Array('太原-101100101', '大同-101100201', '朔州-101100901', '阳泉-101100301', '长治-101100501', '晋城-101100601', '忻州-101101001', '吕梁-101101100', '晋中-101100401','临汾-101100701', '运城-101100801');
cities['辽宁省'] = new Array('沈阳-101070101', '朝阳-101071201', '阜新-101070901', '铁岭-101071101', '抚顺-101070401', '本溪-101070501', '辽阳-101071001', '鞍山-101070301', '丹东-101070601','大连-101070201', '营口-101070801', '盘锦-101071301', '锦州-101070701', '葫芦岛-101071401');
cities['吉林省'] = new Array('长春-101060101', '白城-101060601', '松原-101060801', '吉林-101060201', '四平-101060401', '辽源-101060701', '通化-101060501', '白山-101060901', '延边-101060312');
cities['黑龙江省'] = new Array('哈尔滨-101050101', '齐齐哈尔-101050201', '黑河-101050601', '大庆-101050901', '伊春-101050801', '鹤岗-101051201', '佳木斯-101050401', '双鸭山-101051301','七台河-101051002', '鸡西-101051101', '牡丹江-101050301', '绥化-101050501', '大兴安岭-101050701');
cities['江苏省'] = new Array('南京-101190101', '徐州-101190801', '连云港-101191001', '宿迁-101191301', '淮阴-101190907', '盐城-101190701', '扬州-101190601', '泰州-101191201','南通-101190501', '镇江-101190301', '常州-101191101', '无锡-101190201', '苏州-101190401');
cities['浙江省'] = new Array('杭州-101210101', '湖州-101210201', '嘉兴-101210301', '舟山-101211101', '宁波-101210401', '绍兴-101210501', '金华-101210901', '台州-101210601', '温州-101210701','丽水-101210801');
cities['安徽省'] = new Array('合肥-101220101', '宿州-101220701', '淮北-101221201', '阜阳-101220801', '蚌埠-101220201', '淮南-101220401', '滁州-101221101', '马鞍山-101220501','芜湖-101220301', '铜陵-101221301', '安庆-101220601', '黄山-101221008', '六安-101221501', '巢湖-101221601', '池州-101221701', '宣城-101221401');
cities['福建省'] = new Array('福州-101230101', '南平-101230901', '三明-101230801', '莆田-101230401', '泉州-101230501', '厦门-101230201', '漳州-101230601', '龙岩-101230701', '宁德-101230301');
cities['江西省'] = new Array('南昌-101240101', '九江-101240201', '景德镇-101240801', '鹰潭-101241101', '新余-101241001', '萍乡-101240901', '赣州-101240701', '上饶-101240301','抚州-101240401', '宜春-101240501', '吉安-101240601');
cities['山东省'] = new Array('济南-101120101', '聊城-101121701', '德州-101120401', '东营-101121201', '淄博-101120301', '潍坊-101120601', '烟台-101120501', '威海-101121301', '青岛-101120201','日照-101121501', '临沂-101120901', '枣庄-101121401', '济宁-101120701', '泰安-101120801', '莱芜-101121601', '滨州-101121101', '菏泽-101121001');
cities['河南省'] = new Array('郑州-101180101', '三门峡-101181701', '洛阳-101180901', '焦作-101181101', '新乡-101180301', '鹤壁-101181201', '安阳-101180201', '濮阳-101181301','开封-101180801', '商丘-101181001', '许昌-101180401', '漯河-101181501', '平顶山-101180501', '南阳-101180701', '信阳-101180601', '周口-101181401', '驻马店-101181601');
cities['湖北省'] = new Array('武汉-101200101', '十堰-101201101', '襄樊-101200201', '荆门-101201401', '孝感-101200401', '黄冈-101200501', '鄂州-101200301', '黄石-101200601', '咸宁-101200701','荆州-101200801', '宜昌-101200901', '恩施-101201001');
cities['湖南省'] = new Array('长沙-101250101', '张家界-101251101', '常德-101250601', '益阳-101250700', '岳阳-101251001', '株洲-101250301', '湘潭-101250201', '衡阳-101250401','郴州-101250501', '永州-101251401', '邵阳-101250901', '怀化-101251201', '娄底-101250801');
cities['广东省'] = new Array('广州-101280101', '清远-101281301', '韶关-101280201', '河源-101281201', '梅州-101280401', '潮州-101281501', '汕头-101280501', '揭阳-101281901', '汕尾-101282101','惠州-101280301', '东莞-101281601', '深圳-101280601', '珠海-101280701', '江门-101281101', '佛山-101280800', '肇庆-101280901', '云浮-101281401', '阳江-101281801', '茂名-101282001', '湛江-101281001');
cities['海南省'] = new Array('海口-101310101', '三亚-101310201');
cities['四川省'] = new Array('成都-101270101', '广元-101272101', '绵阳-101270401', '德阳-101272001', '南充-101270501', '广安-101270801', '遂宁-101270701', '内江-101271201', '乐山-101271401','自贡-101270301', '泸州-101271001', '宜宾-101271101', '攀枝花-101270201', '巴中-101270901', '达川-101270607', '资阳-101271301', '眉山-101271501', '雅安-101271701', '阿坝-101271901', '甘孜-101271801', '凉山-101271601');
cities['贵州省'] = new Array('贵阳-101260101', '六盘水-101260801', '遵义-101260201', '毕节-101260701', '铜仁-101260601', '安顺-101260301', '黔西-101260901');
cities['云南省'] = new Array('昆明-101290101', '曲靖-101290401', '玉溪-101290701', '丽江-101291401', '昭通-101291001', '临沧-101291101', '保山-101290501', '德宏-101291501','怒江-101291201', '大理-101290201', '楚雄-101290801', '红河-101290301', '文山-101290601', '香格里拉-101291301');
cities['陕西省'] = new Array('西安-101110101', '延安-101110300', '铜川-101111001', '渭南-101110501', '咸阳-101110200', '宝鸡-101110901', '汉中-101110801', '榆林-101110401', '商洛-101110601', '安康-101110701');
cities['甘肃省'] = new Array('兰州-101160101', '金昌-101160601', '白银-101161301', '天水-101160901', '酒泉-101160801', '张掖-101160701', '武威-101160501', '庆阳-101160401', '平凉-101160301', '定西-101160201', '临夏-101161101', '甘南-101050204');
cities['青海省'] = new Array('西宁-101150101', '海东-101150201', '海南-101150401', '海西-101150701', '海北-101150801', '黄南-101150301', '果洛-101150501', '玉树-101150601');
cities['内蒙古'] = new Array('呼和浩特-101080101', '包头-101080201', '乌海-101080301', '赤峰-101080601', '呼伦贝尔-101081000', '鄂尔多斯-101080701', '巴彦诺尔贡-101081209');
cities['广西'] = new Array('南宁-101300101', '桂林-101300501', '柳州-101300301', '梧州-101300601', '贵港-101300801', '玉林-101300901', '钦州-101301101', '北海-101301301', '防城港-101301401', '百色-101301001', '河池-101301201', '贺州-101300701');
cities['西藏'] = new Array('拉萨-101140101', '那曲-101140601', '昌都-101140501', '林芝-101140401', '山南-101140301', '日喀则-101140201', '阿里-101140701');
cities['宁夏'] = new Array('银川-101170101', '石嘴山-101170201', '吴忠-101170301', '固原-101170401');
cities['新疆'] = new Array('乌鲁木齐-101130101', '克拉玛依-101130201', '喀什-101130901', '阿克苏-101130801', '和田-101131301', '吐鲁番-101130501', '哈密-101131201', '昌吉-101130401', '巴音布鲁克-101130610', '塔城-101131101', '阿勒泰-101131401');
cities['香港'] = new Array('香港-101320101');
cities['澳门'] = new Array('澳门-101330101');
function set_city(province, city) {
var pv, cv;
var i, ii;
pv = province.value;
cv = city.value;
city.length = 1;
if (pv == '0')
return;
if (typeof (cities[pv]) == 'undefined')
return;
for (i = 0; i < cities[pv].length; i++) {
ii = i + 1;
city.options[ii] = new Option();
//给option赋值
//city.options[ii].text = cities[pv][i];
//city.options[ii].value = cities[pv][i];
//将城市的之分割为数组
var strs= cities[pv][i].split("-")
city.options[ii].text = strs[0];
city.options[ii].value = strs[1];
}
}
//查询天气
function findWeather(){
//城市code
var cityCode = $("#city").val();
$.ajax({
type: "post",
url: "ChinaWeatherServlet",
data: {cityCode:cityCode},
success: function(data){
//将返回数据转化为json
var parsedJson = jQuery.parseJSON(data);
$("#ctiyWeath").html("<img src='img/"+parsedJson.img1+"'> <img src='img/"+parsedJson.img2+"'> "+parsedJson.weather+" ");
}
});
}
</script>
</head>
<body>
<SELECT name="sheng" id="to_cn" onchange="set_city(this, document.getElementById('city'));" >
<option value=0>请选择</option>
<option value=北京>北京</option>
<option value=上海>上海</option>
<option value=天津>天津</option>
<option value=重庆>重庆</option>
<option value=河北省>河北省</option>
<option value=山西省>山西省</option>
<option value=辽宁省>辽宁省</option>
<option value=吉林省>吉林省</option>
<option value=黑龙江省>黑龙江省</option>
<option value=江苏省>江苏省</option>
<option value=浙江省>浙江省</option>
<option value=安徽省>安徽省</option>
<option value=福建省>福建省</option>
<option value=江西省>江西省</option>
<option value=山东省>山东省</option>
<option value=河南省>河南省</option>
<option value=湖北省>湖北省</option>
<option value=湖南省>湖南省</option>
<option value=广东省>广东省</option>
<option value=海南省>海南省</option>
<option value=四川省>四川省</option>
<option value=贵州省>贵州省</option>
<option value=云南省>云南省</option>
<option value=陕西省>陕西省</option>
<option value=甘肃省>甘肃省</option>
<option value=青海省>青海省</option>
<option value=内蒙古>内蒙古</option>
<option value=广西>广西</option>
<option value=西藏>西藏</option>
<option value=宁夏>宁夏</option>
<option value=新疆>新疆</option>
<option value=香港>香港</option>
<option value=澳门>澳门</option>
</SELECT>
- 市
<select id="city" class=login_text_input name="shi">
<option value=0>请选择</option>
</select>
<span id="ctiyWeath">
</span>
<input type="button" value="查看天气" onclick="findWeather()">
</body>
</html>
附件：中国天气网所有城市code、天气预报测试项目
相关推荐
在网页开发中，"Ajax 省市级联"是一种常见的交互设计，用于实现用户选择省份时，自动加载并展示对应省份的城市列表。这种方式极大地提升了用户体验，避免了页面刷新，使得数据加载更为流畅。Ajax（Asynchronous ...
中国城市省市级联选择插件，中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国城市省市级联选择插件中国...
在“myprose”这个文件中，可能包含了实现省市级联功能的JSP页面源码、CSS样式表、JavaScript脚本或其他辅助资源。通过分析这些文件，我们可以看到具体的实现细节，包括如何组织数据、如何编写Ajax请求和响应处理，...
"HTML中JavaScript版省市级联"是一个常见的前端技术应用，用于实现动态的省市区选择功能。在这个场景下，用户可以从一个下拉菜单中选择省份，然后根据所选省份自动更新市、区的下拉选项。这种功能在注册、地址填写等...
使用javaScript实现省市级联（二级级联，不能三级级联）
标题中的“省市级联列表”通常是指在数据库设计中用于存储中国省份和城市信息的一种数据结构，这在很多需要地域信息的应用中非常常见，比如电商、物流、招聘网站等。这种列表一般会包括省份和其下属的城市，形成一个...
"省市级联"是一个常见的前端功能，主要用于实现用户在选择省份时，下拉菜单自动更新对应的城市选项，从而提供更加便捷的用户输入体验。这种功能在注册、地址填写等场景中非常常见。 在给定的"js省市级联"项目中，它...
【AJAX省市级联】是一种常见的前端开发技术，用于实现网页上的动态下拉联动效果，让用户在选择省份后，自动加载并显示对应的市、区或县的列表，无需刷新整个页面。这种技术主要依赖于AJAX（Asynchronous JavaScript ...
最后一步是实现前端页面，这里提供了一个简单的JSP页面示例，用于展示如何动态加载省市级联数据： ```jsp ;charset=GB18030" pageEncoding="GB18030" %> <!DOCTYPE ...
【安卓 Spinner 实现省市级联】是Android开发中常见的需求，用于在应用程序中创建一个下拉选择组件，展示省、市、区等地理层级的数据。Spinner控件在Android中广泛用于实现有限选项的选择，通常与Adapter配合使用，...
在IT行业中，"省市级联完整代码"通常指的是一个用于实现中国省级和市级选择功能的程序代码，这种功能常见于各种需要用户输入地区信息的Web应用或者移动应用中。级联选择意味着当用户选择了一个省份后，下拉框会动态...
在IT行业中，省市级联（Province-City-County Association，简称PCCA）是一种常见的数据结构和功能设计，特别是在地理信息系统、电子商务、政务服务等场景中，用于处理和展示多层次的地域层级关系。它允许用户在选择...
在IT行业中，省市级联菜单是一种常见的用户界面元素，尤其在网页或应用程序中，用于让用户选择省份和城市。这种交互方式能够有效地节省空间并提供良好的用户体验。本文将深入探讨省市级联菜单的设计原理、实现方法...
JavaScript省市级联是一种常见的前端开发技术，用于实现用户在选择省份时自动更新下拉框中的城市选项，以此类推到区县等更细的行政区域。这种功能在各种需要填写地址信息的表单中非常常见，例如在线购物、预约服务等...
"超强的jquery省市级联"是指利用jQuery实现的一种动态联动效果，通常用于网页上的地址选择，例如选择省份后自动加载对应的城市列表，城市选择后再加载对应的区县列表。这种功能在电子商务网站、地图服务、物流配送等...
标签“源码”表明这个压缩包可能包含了该省市级联组件的源代码，开发者可以通过查看源代码了解其内部工作原理，学习如何构建这样的功能。而“工具”标签则可能意味着这个组件是一个可复用的工具，可以被其他开发者...
简单实现js省市级联效果->>>>还在等待什么？->>>>javascript和json放在同个页面，方便查看。
总的来说，省市级联Ajax技术是Web开发中常用的一种交互设计，它依赖于Ajax和JavaScript来实现实时的数据加载和页面局部更新，为用户提供了无缝的浏览体验。在实际应用中，还需要结合良好的前端架构和后端接口设计，...