//省份联动的例子
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>省份联动的例子</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script>
function setcity(city) {
switch (document.oblogform["province"].value) {
case "安徽" :
var cityOptions = new Array(
"合肥(*)", "合肥",
"安庆", "安庆",
"蚌埠", "蚌埠",
"亳州", "亳州",
"巢湖", "巢湖",
"滁州", "滁州",
"阜阳", "阜阳",
"贵池", "贵池",
"淮北", "淮北",
"淮化", "淮化",
"淮南", "淮南",
"黄山", "黄山",
"九华山", "九华山",
"六安", "六安",
"马鞍山", "马鞍山",
"宿州", "宿州",
"铜陵", "铜陵",
"屯溪", "屯溪",
"芜湖", "芜湖",
"宣城", "宣城");
break;
case "北京" :
var cityOptions = new Array(
"东城", "东城",
"西城", "西城",
"崇文", "崇文",
"宣武", "宣武",
"朝阳", "朝阳",
"丰台", "丰台",
"石景山", "石景山",
"海淀", "海淀",
"门头沟", "门头沟",
"房山", "房山",
"通州", "通州",
"顺义", "顺义",
"昌平", "昌平",
"大兴", "大兴",
"平谷", "平谷",
"怀柔", "怀柔",
"密云", "密云",
"延庆", "延庆");
break;
case "重庆" :
var cityOptions = new Array(
"万州", "万州",
"涪陵", "涪陵",
"渝中", "渝中",
"大渡口", "大渡口",
"江北", "江北",
"沙坪坝", "沙坪坝",
"九龙坡","九龙坡",
"南岸", "南岸",
"北碚", "北碚",
"万盛", "万盛",
"双挢", "双挢",
"渝北", "渝北",
"巴南", "巴南",
"黔江", "黔江",
"长寿", "长寿",
"綦江", "綦江",
"潼南", "潼南",
"铜梁", "铜梁",
"大足", "大足",
"荣昌", "荣昌",
"壁山", "壁山",
"梁平", "梁平",
"城口", "城口",
"丰都", "丰都",
"垫江", "垫江",
"武隆", "武隆",
"忠县", "忠县",
"开县", "开县",
"云阳", "云阳",
"奉节", "奉节",
"巫山", "巫山",
"巫溪", "巫溪",
"石柱", "石柱",
"秀山", "秀山",
"酉阳", "酉阳",
"彭水", "彭水",
"江津", "江津",
"合川", "合川",
"永川", "永川",
"南川", "南川");
break;
case "福建" :
var cityOptions = new Array(
"福州(*)", "福州",
"福安", "福安",
"龙岩", "龙岩",
"南平", "南平",
"宁德", "宁德",
"莆田", "莆田",
"泉州", "泉州",
"三明", "三明",
"邵武", "邵武",
"石狮", "石狮",
"永安", "永安",
"武夷山", "武夷山",
"厦门", "厦门",
"漳州", "漳州");
break;
case "甘肃" :
var cityOptions = new Array(
"兰州(*)", "兰州",
"白银", "白银",
"定西", "定西",
"敦煌", "敦煌",
"甘南", "甘南",
"金昌", "金昌",
"酒泉", "酒泉",
"临夏", "临夏",
"平凉", "平凉",
"天水", "天水",
"武都", "武都",
"武威", "武威",
"西峰", "西峰",
"张掖", "张掖");
break;
case "广东" :
var cityOptions = new Array(
"广州(*)", "广州",
"潮阳", "潮阳",
"潮州", "潮州",
"澄海", "澄海",
"东莞", "东莞",
"佛山", "佛山",
"河源", "河源",
"惠州", "惠州",
"江门", "江门",
"揭阳", "揭阳",
"开平", "开平",
"茂名", "茂名",
"梅州", "梅州",
"清远", "清远",
"汕头", "汕头",
"汕尾", "汕尾",
"韶关", "韶关",
"深圳", "深圳",
"顺德", "顺德",
"阳江", "阳江",
"英德", "英德",
"云浮", "云浮",
"增城", "增城",
"湛江", "湛江",
"肇庆", "肇庆",
"中山", "中山",
"珠海", "珠海");
break;
case "广西" :
var cityOptions = new Array(
"南宁(*)", "南宁",
"百色", "百色",
"北海", "北海",
"桂林", "桂林",
"防城港", "防城港",
"河池", "河池",
"贺州", "贺州",
"柳州", "柳州",
"钦州", "钦州",
"梧州", "梧州",
"玉林", "玉林");
break;
case "贵州" :
var cityOptions = new Array(
"贵阳(*)", "贵阳",
"安顺", "安顺",
"毕节", "毕节",
"都匀", "都匀",
"凯里", "凯里",
"六盘水", "六盘水",
"铜仁", "铜仁",
"兴义", "兴义",
"玉屏", "玉屏",
"遵义", "遵义");
break;
case "海南" :
var cityOptions = new Array(
"海口(*)", "海口",
"儋县", "儋县",
"陵水", "陵水",
"琼海", "琼海",
"三亚", "三亚",
"通什", "通什",
"万宁", "万宁");
break;
case "河北" :
var cityOptions = new Array(
"石家庄(*)", "石家庄",
"保定", "保定",
"北戴河", "北戴河",
"沧州", "沧州",
"承德", "承德",
"丰润", "丰润",
"邯郸", "邯郸",
"衡水", "衡水",
"廊坊", "廊坊",
"南戴河", "南戴河",
"秦皇岛", "秦皇岛",
"唐山", "唐山",
"新城", "新城",
"邢台", "邢台",
"张家口", "张家口");
break;
case "黑龙江" :
var cityOptions = new Array(
"哈尔滨(*)", "哈尔滨",
"北安", "北安",
"大庆", "大庆",
"大兴安岭", "大兴安岭",
"鹤岗", "鹤岗",
"黑河", "黑河",
"佳木斯", "佳木斯",
"鸡西", "鸡西",
"牡丹江", "牡丹江",
"齐齐哈尔", "齐齐哈尔",
"七台河", "七台河",
"双鸭山", "双鸭山",
"绥化", "绥化",
"伊春", "伊春");
break;
case "河南" :
var cityOptions = new Array(
"郑州(*)", "郑州",
"安阳", "安阳",
"鹤壁", "鹤壁",
"潢川", "潢川",
"焦作", "焦作",
"济源", "济源",
"开封", "开封",
"漯河", "漯河",
"洛阳", "洛阳",
"南阳", "南阳",
"平顶山", "平顶山",
"濮阳", "濮阳",
"三门峡", "三门峡",
"商丘", "商丘",
"新乡", "新乡",
"信阳", "信阳",
"许昌", "许昌",
"周口", "周口",
"驻马店", "驻马店");
break;
case "香港" :
var cityOptions = new Array(
"香港", "香港",
"九龙", "九龙",
"新界", "新界");
break;
case "湖北" :
var cityOptions = new Array(
"武汉(*)", "武汉",
"恩施", "恩施",
"鄂州", "鄂州",
"黄冈", "黄冈",
"黄石", "黄石",
"荆门", "荆门",
"荆州", "荆州",
"潜江", "潜江",
"十堰", "十堰",
"随州", "随州",
"武穴", "武穴",
"仙桃", "仙桃",
"咸宁", "咸宁",
"襄阳", "襄阳",
"襄樊", "襄樊",
"孝感", "孝感",
"宜昌", "宜昌");
break;
case "湖南" :
var cityOptions = new Array(
"长沙(*)", "长沙",
"常德", "常德",
"郴州", "郴州",
"衡阳", "衡阳",
"怀化", "怀化",
"吉首", "吉首",
"娄底", "娄底",
"邵阳", "邵阳",
"湘潭", "湘潭",
"益阳", "益阳",
"岳阳", "岳阳",
"永州", "永州",
"张家界", "张家界",
"株洲", "株洲");
break;
case "江苏" :
var cityOptions = new Array(
"南京(*)", "南京",
"常熟", "常熟",
"常州", "常州",
"海门", "海门",
"淮安", "淮安",
"江都", "江都",
"江阴", "江阴",
"昆山", "昆山",
"连云港", "连云港",
"南通", "南通",
"启东", "启东",
"沭阳", "沭阳",
"宿迁", "宿迁",
"苏州", "苏州",
"太仓", "太仓",
"泰州", "泰州",
"同里", "同里",
"无锡", "无锡",
"徐州", "徐州",
"盐城", "盐城",
"扬州", "扬州",
"宜兴", "宜兴",
"仪征", "仪征",
"张家港", "张家港",
"镇江", "镇江",
"周庄", "周庄");
break;
case "江西" :
var cityOptions = new Array(
"南昌(*)", "南昌",
"抚州", "抚州",
"赣州", "赣州",
"吉安", "吉安",
"景德镇", "景德镇",
"井冈山", "井冈山",
"九江", "九江",
"庐山", "庐山",
"萍乡", "萍乡",
"上饶", "上饶",
"新余", "新余",
"宜春", "宜春",
"鹰潭", "鹰潭");
break;
case "吉林" :
var cityOptions = new Array(
"长春(*)", "长春",
"白城", "白城",
"白山", "白山",
"珲春", "珲春",
"辽源", "辽源",
"梅河", "梅河",
"吉林", "吉林",
"四平", "四平",
"松原", "松原",
"通化", "通化",
"延吉", "延吉");
break;
case "辽宁" :
var cityOptions = new Array(
"沈阳(*)", "沈阳",
"鞍山", "鞍山",
"本溪", "本溪",
"朝阳", "朝阳",
"大连", "大连",
"丹东", "丹东",
"抚顺", "抚顺",
"阜新", "阜新",
"葫芦岛", "葫芦岛",
"锦州", "锦州",
"辽阳", "辽阳",
"盘锦", "盘锦",
"铁岭", "铁岭",
"营口", "营口");
break;
case "澳门" :
var cityOptions = new Array(
"澳门", "澳门");
break;
case "内蒙古" :
var cityOptions = new Array(
"呼和浩特(*)", "呼和浩特",
"阿拉善盟", "阿拉善盟",
"包头", "包头",
"赤峰", "赤峰",
"东胜", "东胜",
"海拉尔", "海拉尔",
"集宁", "集宁",
"临河", "临河",
"通辽", "通辽",
"乌海", "乌海",
"乌兰浩特", "乌兰浩特",
"锡林浩特", "锡林浩特");
break;
case "宁夏" :
var cityOptions = new Array(
"银川(*)", "银川",
"固源", "固源",
"石嘴山", "石嘴山",
"吴忠", "吴忠");
break;
case "青海" :
var cityOptions = new Array(
"西宁(*)", "西宁",
"德令哈", "德令哈",
"格尔木", "格尔木",
"共和", "共和",
"海东", "海东",
"海晏", "海晏",
"玛沁", "玛沁",
"同仁", "同仁",
"玉树", "玉树");
break;
case "山东" :
var cityOptions = new Array(
"济南(*)", "济南",
"滨州", "滨州",
"兖州", "兖州",
"德州", "德州",
"东营", "东营",
"菏泽", "菏泽",
"济宁", "济宁",
"莱芜", "莱芜",
"聊城", "聊城",
"临沂", "临沂",
"蓬莱", "蓬莱",
"青岛", "青岛",
"曲阜", "曲阜",
"日照", "日照",
"泰安", "泰安",
"潍坊", "潍坊",
"威海", "威海",
"烟台", "烟台",
"枣庄", "枣庄",
"淄博", "淄博");
break;
case "上海" :
var cityOptions = new Array(
"崇明", "崇明",
"黄浦", "黄浦",
"卢湾", "卢湾",
"徐汇", "徐汇",
"长宁", "长宁",
"静安", "静安",
"普陀", "普陀",
"闸北", "闸北",
"虹口", "虹口",
"杨浦", "杨浦",
"闵行", "闵行",
"宝山", "宝山",
"嘉定", "嘉定",
"浦东", "浦东",
"金山", "金山",
"松江", "松江",
"青浦", "青浦",
"南汇", "南汇",
"奉贤", "奉贤");
break;
case "山西" :
var cityOptions = new Array(
"太原(*)", "太原",
"长治", "长治",
"大同", "大同",
"候马", "候马",
"晋城", "晋城",
"离石", "离石",
"临汾", "临汾",
"宁武", "宁武",
"朔州", "朔州",
"忻州", "忻州",
"阳泉", "阳泉",
"榆次", "榆次",
"运城", "运城");
break;
case "陕西" :
var cityOptions = new Array(
"西安(*)", "西安",
"安康", "安康",
"宝鸡", "宝鸡",
"汉中", "汉中",
"渭南", "渭南",
"商州", "商州",
"绥德", "绥德",
"铜川", "铜川",
"咸阳", "咸阳",
"延安", "延安",
"榆林", "榆林");
break;
case "四川" :
var cityOptions = new Array(
"成都(*)", "成都",
"巴中", "巴中",
"达川", "达川",
"德阳", "德阳",
"都江堰", "都江堰",
"峨眉山", "峨眉山",
"涪陵", "涪陵",
"广安", "广安",
"广元", "广元",
"九寨沟", "九寨沟",
"康定", "康定",
"乐山", "乐山",
"泸州", "泸州",
"马尔康", "马尔康",
"绵阳", "绵阳",
"眉山", "眉山",
"南充", "南充",
"内江", "内江",
"攀枝花", "攀枝花",
"遂宁", "遂宁",
"汶川", "汶川",
"西昌", "西昌",
"雅安", "雅安",
"宜宾", "宜宾",
"自贡", "自贡",
"资阳", "资阳");
break;
case "台湾" :
var cityOptions = new Array(
"台北(*)", "台北",
"基隆", "基隆",
"台南", "台南",
"台中", "台中",
"高雄", "高雄",
"屏东", "屏东",
"南投", "南投",
"云林", "云林",
"新竹", "新竹",
"彰化", "彰化",
"苗栗", "苗栗",
"嘉义", "嘉义",
"花莲", "花莲",
"桃园", "桃园",
"宜兰", "宜兰",
"台东", "台东",
"金门", "金门",
"马祖", "马祖",
"澎湖", "澎湖");
break;
case "天津" :
var cityOptions = new Array(
"天津", "天津",
"和平", "和平",
"东丽", "东丽",
"河东", "河东",
"西青", "西青",
"河西", "河西",
"津南", "津南",
"南开", "南开",
"北辰", "北辰",
"河北", "河北",
"武清", "武清",
"红挢", "红挢",
"塘沽", "塘沽",
"汉沽", "汉沽",
"大港", "大港",
"宁河", "宁河",
"静海", "静海",
"宝坻", "宝坻",
"蓟县", "蓟县" );
break;
case "新疆" :
var cityOptions = new Array(
"乌鲁木齐(*)", "乌鲁木齐",
"阿克苏", "阿克苏",
"阿勒泰", "阿勒泰",
"阿图什", "阿图什",
"博乐", "博乐",
"昌吉", "昌吉",
"东山", "东山",
"哈密", "哈密",
"和田", "和田",
"喀什", "喀什",
"克拉玛依", "克拉玛依",
"库车", "库车",
"库尔勒", "库尔勒",
"奎屯", "奎屯",
"石河子", "石河子",
"塔城", "塔城",
"吐鲁番", "吐鲁番",
"伊宁", "伊宁");
break;
case "西藏" :
var cityOptions = new Array(
"拉萨(*)", "拉萨",
"阿里", "阿里",
"昌都", "昌都",
"林芝", "林芝",
"那曲", "那曲",
"日喀则", "日喀则",
"山南", "山南");
break;
case "云南" :
var cityOptions = new Array(
"昆明(*)", "昆明",
"大理", "大理",
"保山", "保山",
"楚雄", "楚雄",
"大理", "大理",
"东川", "东川",
"个旧", "个旧",
"景洪", "景洪",
"开远", "开远",
"临沧", "临沧",
"丽江", "丽江",
"六库", "六库",
"潞西", "潞西",
"曲靖", "曲靖",
"思茅", "思茅",
"文山", "文山",
"西双版纳", "西双版纳",
"玉溪", "玉溪",
"中甸", "中甸",
"昭通", "昭通");
break;
case "浙江" :
var cityOptions = new Array(
"杭州(*)", "杭州",
"安吉", "安吉",
"慈溪", "慈溪",
"定海", "定海",
"奉化", "奉化",
"海盐", "海盐",
"黄岩", "黄岩",
"湖州", "湖州",
"嘉兴", "嘉兴",
"金华", "金华",
"临安", "临安",
"临海", "临海",
"丽水", "丽水",
"宁波", "宁波",
"瓯海", "瓯海",
"平湖", "平湖",
"千岛湖", "千岛湖",
"衢州", "衢州",
"江山", "江山",
"瑞安", "瑞安",
"绍兴", "绍兴",
"嵊州", "嵊州",
"台州", "台州",
"温岭", "温岭",
"温州", "温州",
"余姚", "余姚",
"舟山", "舟山");
break;
case "海外" :
var cityOptions = new Array(
"欧洲", "欧洲",
"北美", "北美",
"南美", "南美",
"亚洲", "亚洲",
"非洲", "非洲",
"大洋洲", "大洋洲");
break;
default:
var cityOptions = new Array("", "");
break;
}
document.oblogform["city"].options.length = 0;
for(var i = 0; i < cityOptions.length/2; i++) {
document.oblogform["city"].options[i]=new Option(cityOptions[i*2],cityOptions[i*2+1]);
if (document.oblogform["city"].options[i].value==city)
{
//alert("here put City ok!");
document.oblogform["city"].selectedIndex = i;
}
}
}
function initprovcity(province,city) {
var provObject = document.oblogform["province"];
for(var i = 0; i < document.oblogform["province"].options.length; i++) {
if (document.oblogform["province"].options[i].value==province)
{
//alert("prov put is ok");
document.oblogform["province"].selectedIndex = i;
}
}
setcity(city);
}
</script>
</head>
<body>
<%
String showCity =
showCity = "<select onchange='setcity();' name='province' >";
showCity = showCity + "<option value=''>--请选择省份--</option>";
showCity = showCity + "<option ";
showCity = showCity + "value=安徽>安徽</option> <option value=北京>北京</option> ";
showCity = showCity + "<option value=重庆>重庆</option> <option ";
showCity = showCity + "value=福建>福建</option> <option value=甘肃>甘肃</option> ";
showCity = showCity + "<option value=广东>广东</option> <option ";
showCity = showCity + "value=广西>广西</option> <option value=贵州>贵州</option> ";
showCity = showCity + "<option value=海南>海南</option> <option ";
showCity = showCity + "value=河北>河北</option> <option value=黑龙江>黑龙江</option> ";
showCity = showCity + "<option value=河南>河南</option> <option ";
showCity = showCity + "value=香港>香港</option> <option value=湖北>湖北</option> ";
showCity = showCity + "<option value=湖南>湖南</option> <option ";
showCity = showCity + "value=江苏>江苏</option> <option value=江西>江西</option> ";
showCity = showCity + "<option value=吉林>吉林</option> <option ";
showCity = showCity + "value=辽宁>辽宁</option> <option value=澳门>澳门</option>";
showCity = showCity + "<option value=内蒙古>内蒙古</option> <option ";
showCity = showCity + "value=宁夏>宁夏</option> <option value=青海>青海</option> ";
showCity = showCity + "<option value=山东>山东</option> <option ";
showCity = showCity + "value=上海>上海</option> <option value=山西>山西</option> ";
showCity = showCity + "<option value=陕西>陕西</option> <option ";
showCity = showCity + "value=四川>四川</option> <option value=台湾>台湾</option> ";
showCity = showCity + "<option value=天津>天津</option> <option ";
showCity = showCity + "value=新疆>新疆</option> <option value=西藏>西藏</option> ";
showCity = showCity + "<option value=云南>云南</option> <option ";
showCity = showCity + "value=浙江>浙江</option> <option ";
showCity = showCity + "value=海外>海外</option></select>";
showCity = showCity + " <select name='city' id = 'city' >";
showCity = showCity + "</select>";
// showCity = showCity + "<script src='inc/getcity.js'></script>";
showCity = showCity + "<script>initprovcity('','');</script>";
%>
<form name="oblogform" method="post" action="">
<li class="r_right"><%=showCity%></li> <!-- 这一句和上面的月份就可以成为联动了-->
<!-- 输入用户名,即出现相关提示-->
<li><label for="uname"><img src="li_none.gif"" class="okimg" id="d_uname_img" />您的登录名:</label></li>
<li class="r_right">
<input name="username" type="text" id="uname" size="20" maxlength="30" onFocus="on_input('d_uname');this.className='input_onFocus'" onBlur="out_uname();this.className='input_onBlur'" /></li>
<li class="r_msg"><div id="d_uname" class="d_default"></div></li>
<input type="text" name="hello"/>
</form>
</body>
</html>
<script language="javascript">
<!--
/******下面是用户的检测,利用得到焦点和失去焦点,进行提示(oblog45的reg.asp中)*****/
var msg;
var li_ok='0921/li_ok.gif';
var li_err='0921/li_err.gif'
var bname_m=false;
function init_reg(){
msg=new Array(
"请输入4-14位字符,英文、数字的组合。",
"请输入4-14位字符,英文、数字的组合。",
"请输入6位以上字符,不允许空格。",
"请重复输入上面的密码。",
"请选择密码提示问题。",
"5个字符、数字或3个汉字以上(包括6个)。",
"请输入您常用的电子邮箱地址。",
"请输入您的blog名称。",
"请选择您所在的地区。",
"请选择您的blog类别。",
"只有同意注册条款才能完成注册。"
)
document.getElementById("d_uname").innerHTML=msg[0];
//document.getElementById("d_upwd1").innerHTML=msg[2];
//document.getElementById("d_upwd2").innerHTML=msg[3];
//document.getElementById("d_question").innerHTML=msg[4];
//document.getElementById("d_an").innerHTML=msg[5];
//document.getElementById("d_email").innerHTML=msg[6];
//document.getElementById("d_blogname").innerHTML=msg[7];
//document.getElementById("d_city").innerHTML=msg[8];
//document.getElementById("d_usertype").innerHTML=msg[9];
}
init_reg();
function on_input(objname){
var strtxt;
var obj=document.getElementById(objname);
obj.className="d_on";
//alert(objname);
switch (objname){
case "d_uname":
strtxt=msg[0];
break;
/*case "d_udomain":
strtxt=msg[1];
break;
case "d_upwd1":
strtxt=msg[2];
break;
case "d_upwd2":
strtxt=msg[3];
break;
case "d_an":
strtxt=msg[5];
break;
case "d_email":
strtxt=msg[6];
break;
case "d_blogname":
strtxt=msg[7];
break;*/
}
obj.innerHTML=strtxt;
}
function out_uname(){
var obj=document.getElementById("d_uname");
var str=document.getElementById("uname").value;
var chk=true;
//alert(str);
if (str<4 || str>14){chk=false;}
if (chk){
obj.className="d_ok";
obj.innerHTML='用户名已经输入。';
document.getElementById("d_uname_img").src=li_ok;
/*if (document.getElementById("blogname").value=='' || !bname_m){
document.getElementById("blogname").value=document.getElementById("uname").value+"的blog";
out_blogname();
}*/
}else{
obj.className="d_err";
obj.innerHTML=msg[0];
document.getElementById("d_uname_img").src=li_err;
}
return chk;
}
</script>
分享到:
相关推荐
在这个例子中,`JS-省份城市联动完整版.html`文件很可能是包含上述代码的HTML文件,可以直接在浏览器中运行,展示省份城市联动的效果。为了提高用户体验,还可以考虑添加异步加载数据、优化选择过程中的性能以及处理...
在IT领域,尤其是在前端开发中,"省份城市联动表"是一种常见的交互设计,它涉及到JavaScript(简称JS)的实现。这种设计主要用于用户界面,让用户在选择省份时,城市选项会根据所选省份动态更新,提供更为便捷的用户...
一个省份城市联动下拉列表的例子。
省份城市联动通常应用于需要用户选择其所在地区(如省份、城市)的应用场景中,例如电商平台、物流系统等。实现这一功能的核心是通过用户在省份下拉框中的选择来动态更新城市下拉框的选项。 #### 1.1 数据准备 ...
这里的“省份城市地区-三级联动”是指在用户界面中,通过选择省份、城市和区域这三个层级的数据来实现筛选或导航的功能。这个特定的例子是基于jQuery和XML技术实现的。 首先,jQuery是一个强大的JavaScript库,它...
举个例子,若一个电子商务网站需要根据用户选择的配送地址提供运费计算,或者一个天气预报应用需要根据用户的位置来推送天气信息,使用省份城市二级联动表,可以使得这些功能的实现变得更加高效和可靠。 在具体实现...
在Android开发中,二级联动是一种常见的用户界面设计,通常用于实现多级选择或者筛选功能,例如省份城市选择、分类筛选等。在这个例子中,我们主要探讨如何在Android应用中实现一个简单的二级联动效果。 首先,我们...
jquery+xml 省份 城市 区域 三级联动菜单. 用id作为连接点,高效快速. IE与firefox测试通过. 可加载默认项 里面附带例子^ ^ PS: 测试时 IE或chrome 用户请不要直接双击执行,因为这样是物理路径,不能加载xml. 请放...
数据应按照联动的逻辑组织,例如,第一级的选项可能对应省份,第二级对应城市,第三级对应区县。 4. **AJAX 配置**:在页面上添加一个 `ScriptManager` 控件,它负责管理页面上的 AJAX 功能。然后,将 `ddlLevel1` ...
在网页开发中,省市联动是一种常见的交互功能,它允许用户在选择省份后,城市下拉框自动更新为对应省份的城市选项。本例子基于jQuery库来实现这一功能,无需依赖数据库,仅通过静态数据就能完成。这里我们将深入探讨...
全国三级城市联动是一种常见的前端开发技术,主要用于实现省、市、区(县)的联动选择效果,常见于地址填写、配送范围设定等场景。在这个js版本中,我们主要探讨如何利用JavaScript来实现这一功能。 首先,我们需要...
JavaScript实现的省份城市三级联动是一种常见的前端交互功能,主要用于地理信息的选择,如用户在填写地址时选择所在的省、市、区。在这个例子中,我们通过JavaScript动态创建HTML的`<select>`元素,并根据用户在上级...
在这个"**dwr下拉联动的例子**"中,我们关注的是如何利用DWR来实现下拉菜单的联动效果,即在一个下拉框的选择改变时,根据所选值动态更新另一个下拉框的内容。 在传统的Web应用中,这种联动通常需要通过页面刷新...
这种技术常见于多级选择,例如地区选择(国家-省份-城市),或者产品分类(大类-小类-子类)。本例子涉及的是二级、三级乃至更多级的联动效果,并且这些数据不是静态写入代码,而是动态从数据库中获取,这样就实现了...
这种功能在很多中国的网站上常见,比如用户在填写地址时需要选择所在的省份、城市和区县。 DWR是一种JavaScript库,它允许在客户端浏览器和服务器之间进行实时、异步通信,类似于AJAX,但提供了更直接的方法来调用...
接着,省份下拉菜单也添加了类似事件监听器,根据用户选择的省份更新城市下拉菜单。 为了实现下拉框的隐藏和显示功能,我们可以使用CSS的`display`属性。默认情况下,下拉框可以设置为`display: none`,当需要显示...
三级联动通常指的是三个层次的下拉列表,例如在这个案例中,可能是国家、省份和城市的选择。当用户在第一级选择一个国家后,第二级的省份会自动更新为与该国相关的省份,接着在省份选定后,第三级的城市也会相应地...
JavaScript城市联动插件是一种常见的前端交互功能,常用于网站中的地址选择,如省市区三级联动。这个"test"类可能是Java环境下实现此功能的一部分。在本文中,我们将深入探讨JavaScript城市联动插件的工作原理,以及...
这种设计通常包括国家、省份、城市和区县四个层级,依次展开,用户逐级选择,最终确定具体位置。在网页开发中,实现这种功能可以提升用户体验,使用户能够快速找到并选择自己的位置。 在给定的文件中,我们可以看到...
1. 数据准备:首先,我们需要一个包含所有省份、城市和区县的数据结构,可以是JSON格式或者数组格式。 2. DOM操作:利用jQuery选择器找到对应的HTML元素(下拉列表),并绑定`change`事件监听用户的选择。 3. 事件...