以下是木有从数据库取值的下拉列表联动 如果要从数据库取值 动态刷新的话 可以用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>
分享到:
相关推荐
### 下拉列表二级联动:深入解析与实现 在网页开发中,下拉列表是一种常见的用户交互元素,用于提供选项供用户选择。而“下拉列表二级联动”则是在此基础上的一种高级应用,它允许用户在选择第一个下拉列表的某个...
除了静态配置外,dropList v1.1还支持通过JavaScript动态添加下拉列表和选择项。这一功能使得在运行时根据用户操作或服务器返回的数据实时更新列表变得可能,为网页增加了动态响应的能力。 在实际应用中,例如“dp...
在"二级联动(二个下拉列表关联)"这个例子中,我们可以深入理解其背后的实现原理和技术细节: 1. **HTML 结构**:首先,HTML 页面会包含两个`<select>`元素,每个元素内部包含多个`<option>`标签,表示不同的可...
标题 "省市级联动静态资源包.zip" 暗示了这个压缩文件包含的是一个用于实现中国省级和市级选择联动效果的静态资源集合。这种联动效果常见于网站的地址输入框,用户在选择省份后,下拉菜单会自动更新为对应省份的城市...
在.NET MVC框架中,下拉列表的两级联动是一种常见的用户界面设计,用于处理层次结构的数据。这种方式能够提高用户体验,使得用户在选择一个选项时,第二个相关的下拉列表会自动更新,展示与前一个选择相关联的子选项...
这几天又有人在社区问我无刷新联动和asp伪静态的问题,于是我就写了这么个小程序来给对这部分有疑问的朋友。 其中这个伪静态是本人原创作品(如有思路相同的前做则纯属意外呵呵)。试想,你可以把自己的页面地址...
总结来说,基于MVC3和jQuery实现下拉列表联动的过程主要包括以下步骤: 1. 定义实体类以表示省份和城市。 2. 初始化数据并存储在服务器端。 3. 创建Controller的Action方法,分别用于获取所有省份和特定省份的城市...
总的来说,这个项目展示了如何使用C#和数据库技术来实现动态加载下拉列表,特别是在省市联动场景中的应用。通过结合前端的事件监听和后端的数据库查询,实现了用户选择省份后实时更新城市列表的功能,提高了页面交互...
这个框架提供了丰富的功能和定制性,使得下拉列表不仅能够简单地显示一组静态选项,还能与数据源进行联动,展示动态加载的数据。 1. **ExtJS6中的ComboBox** - ComboBox是ExtJS中的一个基础组件,它结合了文本...
下拉联动是指在一个下拉列表中选择一个选项时,根据预设的关联规则,动态改变另一个或多个下拉列表的内容。这种联动通常涉及到多个级联的select元素,用户选择每一级的选项都会影响到下一级的选择范围。 三、N级...
2. **添加事件监听器**:为第一个下拉列表添加`change`事件监听器,当用户更改选中的值时触发。 3. **处理事件**:在事件处理函数中,根据用户的选择动态更新其他下拉列表的内容。 4. **按钮行为**:根据当前状态...
在网页开发中,级联下拉列表是一种常见的交互设计,它允许用户在多个下拉框之间建立联动关系,通常用于地区选择(如省市区)、部门结构等场景。本知识点主要聚焦于使用jQuery实现的级联下拉列表,特别是修正版的实现...
标题 "juery 省、市、县 下拉列表 插件" 提供的信息表明,这是一个基于 jQuery 的前端插件,专门用于创建一个三级联动的下拉列表,展示中国的省份、城市和县(区)数据。这样的插件在网页表单设计中非常常见,能够...
比如,在一个表单中,当用户填写了部分信息后,相关的下拉列表会根据这些信息动态加载匹配的数据。活联动提供了更丰富的交互体验,但可能需要更多的服务器资源,因为它涉及到每次用户操作后的实时数据请求和处理。 ...
通过这些方法,你可以根据实际需求创建交互式的下拉列表,无论是简单的静态选项还是与数据区域联动的动态选项,都能轻松实现。这种技术在处理大量数据时尤其有用,因为它可以帮助保持数据的一致性和准确性。
- 首先,我们需要创建三个下拉选择框,分别代表省、市、县。每个选择框都需要有一个`<select>`标签,其中`<option>`标签用于填充选项。初始状态下,所有选项都应是可见的,即省市县的全部数据需预先定义好。 2. **...
本文将详细介绍如何在Android中实现一个三级联动的下拉列表,即spinner。 首先,我们需要在XML布局文件中定义三个Spinner组件,每个Spinner代表一个级别的选择。如给定的XML布局所示: ```xml android:layout_...
4. 配置C1TrueDBDropdown:为每个下拉列表设置数据源,可以是静态列表或者动态从数据库获取。 5. 处理FilterChanged事件:当用户选择下拉列表中的值时,需要捕获FilterChanged事件,更新Grid的过滤条件。 下面是一...
4. 更新下拉列表:根据用户的选择,从XML数据中筛选出对应的数据,填充到下拉列表中。 5. 链接第三级:同样的方式,根据第二级的选择,更新第三级的下拉列表。 例如,当用户在第一级省份列表中选择“省份1”时,...
"FineUI grid下拉grid"是指在FineUI的表格组件中嵌入下拉列表功能,以增强数据输入和展示的灵活性。这种功能常见于需要用户从预设选项中选择的情况,如选择状态、类别或者关联数据等。 1. **FineUI Grid组件**:...