以下是木有从数据库取值的下拉列表联动 如果要从数据库取值 动态刷新的话 可以用AJAX技术来解决 参考尚学堂马士兵的
<html><head>
<title>全国省市县无刷新多级关联菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312">
<script language="JavaScript">
<!--
function Dsy()
{
this.Items = {};
}
Dsy.prototype.add = function(id,iArray)
{
this.Items[id] = iArray;
}
Dsy.prototype.Exists = function(id)
{
if(typeof(this.Items[id]) == "undefined") return false;
return true;
}
function change(v){
var str="0";
for(i=0;i<v;i++){ str+=("_"+(document.getElementById(s[i]).selectedIndex-1));};
var ss=document.getElementById(s[v]);
with(ss){
length = 0;
options[0]=new Option(opt0[v],opt0[v]);
if(v && document.getElementById(s[v-1]).selectedIndex>0 || !v)
{
if(dsy.Exists(str)){
ar = dsy.Items[str];
for(i=0;i<ar.length;i++)options[length]=new Option(ar[i],ar[i]);
if(v)options[1].selected = true;
}
}
if(++v<s.length){change(v);}
}
}
var dsy = new Dsy();
dsy.add("0",["安徽","北京","福建","甘肃","广东","广西","贵州","海南","河北","河南","黑龙江","湖北","湖南","吉林","江苏","江西","辽宁","内蒙古","宁夏","青海","山东","山西","陕西","上海","四川","天津","西藏","新疆","云南","浙江","重庆"]);
dsy.add("0_0",["安庆","蚌埠","巢湖","池州","滁州","阜阳","合肥","淮北","淮南","黄山","六安","马鞍山","宿州","铜陵","芜湖","宣城","亳州"]);
dsy.add("0_0_0",["安庆市","怀宁县","潜山县","宿松县","太湖县","桐城市","望江县","岳西县","枞阳县"]);
dsy.add("0_0_1",["蚌埠市","固镇县","怀远县","五河县"]);
dsy.add("0_0_2",["巢湖市","含山县","和县","庐江县","无为县"]);
dsy.add("0_0_3",["池州市","东至县","青阳县","石台县"]);
dsy.add("0_0_4",["滁州市","定远县","凤阳县","来安县","明光市","全椒县","天长市"]);
dsy.add("0_0_5",["阜南县","阜阳市","界首市","临泉县","太和县","颖上县"]);
dsy.add("0_0_6",["长丰县","肥东县","肥西县"]);
dsy.add("0_0_7",["淮北市","濉溪县"]);
dsy.add("0_0_8",["凤台县","淮南市"]);
dsy.add("0_0_9",["黄山市","祁门县","休宁县","歙县","黟县"]);
dsy.add("0_0_10",["霍邱县","霍山县","金寨县","六安市","寿县","舒城县"]);
dsy.add("0_0_11",["当涂县","马鞍山市"]);
dsy.add("0_0_12",["灵璧县","宿州市","萧县","泗县","砀山县"]);
dsy.add("0_0_13",["铜陵市","铜陵县"]);
dsy.add("0_0_14",["繁昌县","南陵县","芜湖市","芜湖县"]);
dsy.add("0_0_15",["广德县","绩溪县","郎溪县","宁国市","宣城市","泾县","旌德县"]);
dsy.add("0_0_16",["利辛县","蒙城县","涡阳县","亳州市"]);
dsy.add("0_1",["北京ff"]);]
dsy.add("0_1_0",["北京市","密云县","延庆县"]);
dsy.add("0_2",["福州","龙岩","南平","宁德","莆田","泉州","三明","厦门","漳州"]);
dsy.add("0_2_0",["长乐市","福清市","福州市","连江县","罗源县","闽侯县","闽清县","平潭县","永泰县"]);
dsy.add("0_2_1",["长汀县","连城县","龙岩市","上杭县","武平县","永定县","漳平市"]);
dsy.add("0_2_2",["光泽县","建阳市","建瓯市","南平市","浦城县","邵武市","顺昌县","松溪县","武夷山市","政和县"]);
dsy.add("0_2_3",["福安市","福鼎市","古田县","宁德市","屏南县","寿宁县","霞浦县","周宁县","柘荣县"]);
dsy.add("0_2_4",["莆田市","仙游县"]);
dsy.add("0_2_5",["安溪县","德化县","惠安县","金门县","晋江市","南安市","泉州市","石狮市","永春县"]);
dsy.add("0_2_6",["大田县","建宁县","将乐县","明溪县","宁化县","清流县","三明市","沙县","泰宁县","永安市","尤溪县"]);
dsy.add("0_2_7",["厦门市"]);
dsy.add("0_2_8",["长泰县","东山县","华安县","龙海市","南靖县","平和县","云霄县","漳浦县","漳州市","诏安县"]);
dsy.add("0_3",["白银","定西","甘南藏族自治州","嘉峪关","金昌","酒泉","兰州","临夏回族自治州","陇南","平凉","庆阳","天水","武威","张掖"]);
dsy.add("0_30",["重庆"]);
dsy.add("0_30_0",["城口县","大足县","垫江县","丰都县","奉节县","合川市","江津市","开县","梁平县","南川市","彭水苗族土家族自治县","荣昌县","石柱土家族自治县","铜梁县","巫山县","巫溪县","武隆县","秀山土家族苗族自治县","永川市","酉阳土家族苗族自治县","云阳县","忠县","重庆市","潼南县","璧山县","綦江县"]);
//-->
</script>
<script language="JavaScript">
<!--
var s=["s1","s2","s3"];
var opt0 = ["-省份-","-地级市-","-市、县级市、县-"];
function setup()
{
for(i=0;i<s.length-1;i++)
document.getElementById(s[i]).onchange=new Function("change("+(i+1)+")");
change(0);
}
//-->
</script>
</head>
<body onload="setup()">
多级关联菜单(联动，用的时候最好对select的宽度作限制)：
<form name="frm">
<select id="s1"><option value="-省份-">-省份-</option><option value="安徽">安徽</option><option selected="selected" 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="s2"><option value="-地级市-">-地级市-</option><option selected="selected" value="北京">北京</option></select>
<select id="s3"><option value="-市、县级市、县-">-市、县级市、县-</option><option selected="selected" value="北京市">北京市</option><option value="密云县">密云县</option><option value="延庆县">延庆县</option></select>
</form>
</body></html>
分享到：
相关推荐
这几天又有人在社区问我无刷新联动和asp伪静态的问题，于是我就写了这么个小程序来给对这部分有疑问的朋友。 其中这个伪静态是本人原创作品（如有思路相同的前做则纯属意外呵呵）。试想，你可以把自己的页面地址...
本篇文章主要介绍了jquery基于layui实现二级联动下拉选择(省份城市选择)，具有一定的实用价值，需要的朋友可以参考下
TIPs： 用了element UI的select选择器 。...数据没写南海诸岛，没写默认全国。 HTML： <!--联动选择地区--> 选择地区：> placeholder=请选择省份 v-on:change=getProv($event)> <el-option
随着电商的火爆，这多级联动下拉菜单体现的更加充分，最明显的就是地址的多级联动下拉选择，所以这里就简单的分享一下 jQuery cxSelect 多级联动下拉菜单 cxSelect 是基于 jQuery 的多级联动菜单插件，适用于省市、...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 给下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
-修正extjs最新版本(v3.2.2)中的一个bug，如果下拉列表中存在两个相同的Text，则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 ...
实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉列表的默认值 198 实例167 设置下拉列表的样式 199 实例168 下拉列表打开窗口 200 实例169 Tab键在文本域中的体现 ...
自定义字段：系统支持单选、多选、文本、下拉菜单、可视化编辑器、联动等多种自定义字段功能，同时操作起来也很容易（熟悉基本网络的用户花一点点时间就基本上会了） 静态页生成：千呼万唤始出来~汗一个先！虽然效率...
自定义字段：系统支持单选、多选、文本、下拉菜单、可视化编辑器、联动等多种自定义字段功能，同时操作起来也很容易（熟悉基本网络的用户花一点点时间就基本上会了） 静态页生成：千呼万唤始出来~汗一个先！虽然效率...
自定义字段：系统支持单选、多选、文本、下拉菜单、可视化编辑器、联动等多种自定义字段功能，同时操作起来也很容易（熟悉基本网络的用户花一点点时间就基本上会了） 静态页生成：千呼万唤始出来~汗一个先！虽然效率...
自定义字段：系统支持单选、多选、文本、下拉菜单、可视化编辑器、联动等多种自定义字段功能，同时操作起来也很容易（熟悉基本网络的用户花一点点时间就基本上会了） 静态页生成：千呼万唤始出来~汗一个先！虽然效率...
同时支持用户自主编辑PHP文件来创建模块自定义字段：系统支持单选、多选、文本、下拉菜单、可视化编辑器、联动等多种自定义字段功能，同时操作起来也很容易（熟悉基本网络的用户花一点点时间就基本上会了）静态页...
3.三种方式实现下拉列表 41 4.二级联动 42 5.其它表单标签 44 6.其它常用标签的使用（代码参名为“补充”的文件夹下的tag.jsp） 45 七、国际化 47 1.action级别下的国际化 47 2.配置package的资源文件 48 3.app级别...
-重新设计模拟树的下拉列表的实现，避免选中某项后的闪烁。 +2009-11-21 v2.1.5 +Tree优化。 -修正Expanded项和Checked项的状态在回发改变后不能保持的BUG。 -GetNodeById更名为FindNode，保持和...
第2章（\代码\第02章） • sample01.htm 将JavaScript代码插入在标签与标签之间 • sample02.htm 将JavaScript代码放在了标签与标签之间 • sample03.htm JavaScript与HTML混合执行 ...
document对象 05/5.10.2.html 使用复选框范例 05/5.11.12.html 下拉框实例：二级联动的下拉列表菜单 <br>第6章 06/6.1.3.html 使用方括号（[]）引用对象的属性和方法范例 06/6.1.5.html ...
4.3.3 ext.function中的静态方法 / 120 4.3.4 ext.array中的静态方法 / 127 4.3.5 ext.error中的静态方法 / 133 4.4 深入了解类的创建及管理 / 135 4.4.1 开始创建类 / 135 4.4.2 创建类的类：ext.class / 137...