`
qzxfl008
  • 浏览: 78473 次
  • 性别: Icon_minigender_1
  • 来自: 浙江
社区版块
存档分类
最新评论

省份级联简单示例

 
阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>New Web Project</title>
		<script type="text/javascript">
			
			var sf = new Array();
			sf[0] = new Array("0","--请选择省份--");
			var gd = new Array();
			gd[0] = new Array("0","广东");
			gd[1] = new Array("1","深圳");
			
			var zj = new Array();
			zj[0]  = new Array("0","杭州");
			zj[1] = new Array("1","宁波")
			
			function showCity(pe){
				for (var i=0; i<pe.length;i++){
					document.f.city.options[i] = new Option(pe[i][1],pe[i][0]);
				}
			}
			
			function choose(){
				var tag = document.f.p.value;
				switch(tag){
					case '0':init();showCity(sf);break;
					case '1':init();showCity(gd);break;
					case '2':init();showCity(zj);break;
				}
			}
			
			function init(){
				var len = document.f.city.options.length;
				for (var i = 0; i<len; i++){
					document.f.city.remove(i);
				}
			}
			
			function flush(){
				document.f.p.options[0].selected = true;
			}
		</script>
	</head>
	<body onload="flush()">
		<h1>省市级联</h1>
		<form name="f">
		<select name="p" onchange="choose()">
			<option value="0" selected>--省份</option>
			<option value="1">广东</option>
			<option value="2">浙江</option>
			
		</select>
		
		<select name="city">
			<option value="0">城市</option>
		</select>
		</form>
	</body>
</html>

分享到:
评论

相关推荐

    滚轮选择多个数字密码省份级联android

    为了实现省份级联,我们需要维护一个包含省份和对应城市的数据结构,例如HashMap或SQLite数据库,当用户选定一个省份时,根据该省份加载并显示相关的城市列表。 在代码实现上,可能会有以下几个关键步骤: 1. **...

    ajax+ssh实现省份城市级联查询

    "Ajax+SSH实现省份城市级联查询"是一个典型的示例,展示了如何利用这些技术提高用户体验,减少服务器负载。在此,我们将深入探讨Ajax、Spring、Hibernate和Struts2这四个关键技术以及它们在实现级联查询中的作用。 ...

    国家省份城市级联菜单

    标题中的“国家省份城市级联菜单”指的是在用户界面设计中常见的一种交互元素,它用于让用户选择国家、省份(或州)以及城市,通常在填写地址或者设置地理位置时使用。这种菜单一般会以级联的方式呈现,即选择一个...

    JS实现的省份级联实例代码

    通过上述代码,我们可以实现一个简单的省份级联选择器,用户可以选择省份后自动更新对应的城市列表。这种技术广泛应用于在线表单填写、地理位置选择等功能中,大大提高了用户体验。开发者可以根据实际需求进一步扩展...

    JSF 动态 数据的三级级联示例操作

    在JavaServer Faces (JSF) 框架中,动态...总的来说,这个JSF动态数据的三级级联示例展示了如何结合Java后端、数据库和JSF框架,构建一个动态响应的Web界面。理解并掌握这个过程对于提升Java Web开发技能非常有帮助。

    jQuery+ajax实现无刷新级联菜单示例

    ### jQuery+ajax实现无刷新级联菜单示例知识点 #### 知识点一:无刷新级联菜单概念 无刷新级联菜单是一种常见的Web界面组件,主要用于地区选择、分类筛选等场景。它允许用户在一个下拉列表中选择一个选项后,另一个...

    JavaScript实现的级联算法示例【省市二级联动功能】

    在本例中,这种级联效应体现在省市二级联动的功能上,即当用户在一个下拉菜单(如省份)中选择一个选项时,另一个下拉菜单(如城市)会根据所选省份动态更新其可选项。这种功能在网页表单设计中非常常见,用于提供...

    javascript中的级联插件

    例如,以下是一个简单的两级级联数据示例: ```json { "countries": { "China": { "provinces": ["Beijing", "Shanghai", "Guangzhou"] }, "USA": { "states": ["California", "New York", "Texas"] } } } ...

    省份城市区域div级联 超好工具js jQuery

    在IT行业中,尤其是在前端开发领域,我们经常遇到需要实现省份城市区域选择的功能,这通常涉及到用户界面中的级联下拉菜单。"省份城市区域div级联 超好工具js jQuery"是一个这样的解决方案,它利用JavaScript(特别...

    jsp实现级联菜单 jsp实现级联菜单

    级联菜单是Web应用程序中常见的一种交互设计方式,尤其在需要展示多层级数据结构时,如省份-城市选择器等场景下非常实用。通过级联菜单,用户可以方便地根据上一级的选择来筛选下一级的选项,从而达到快速定位的目的...

    二级联动,级联,省份城市联动

    二级联动,也称为级联选择或连锁反应,是指在一个下拉菜单的选择会影响到另一个下拉菜单的选项。这种设计通常用于减少用户输入,提高用户体验,让用户能够通过逐级选择来找到所需的具体信息。例如,在一个网页上,...

    前台JS(jquery ajax)调用后台方法实现无刷新级联菜单示例

    总结来说,这个示例展示了如何使用jQuery AJAX调用ASP.NET后台的Web方法,实现无刷新的级联菜单。前端监听用户的选择,然后通过AJAX请求获取新的数据,后台方法处理请求并返回数据,前端再根据返回的数据更新界面。...

    struts实现select级联

    在实际项目中,数据通常从数据库中获取,因此级联Action需要根据用户选择的省份查询数据库并返回相应城市的列表。这个过程可以通过Ajax请求和JSON响应来完成,确保页面的交互性和用户体验。在JSP页面中,JavaScript...

    select级联下拉列表

    以下是一个简单的jQuery示例,展示了如何实现级联下拉列表: ```javascript $(document).ready(function() { $('#province').on('change', function() { var selectedProvince = $(this).val(); // 使用Ajax获取...

    jQuery 级联下拉列表

    在网页开发中,级联下拉列表是一种常见的交互设计,常用于实现省市区选择、类别筛选等场景。jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和Ajax交互,同时也提供了丰富的插件来扩展功能。在这个...

    uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip

    在"uniapp选择器,包含一级,二级级联,三级级联uniapp-picker-master.zip"这个压缩包中,包含了实现这种级联选择的示例代码。 uni-app是一个多端统一的开发框架,它可以将同一份代码编译到iOS、Android、H5、小程序等...

    jQuery城市级联插件

    总结,jQuery城市级联插件以其简单易用和高度可定制的特点,成为开发者构建动态级联选择功能的首选工具。通过深入理解其工作原理和使用方法,开发者能够轻松应对各种复杂场景,提升项目开发效率。在实际运用中,应...

    级联 ajax实现方式

    例如,以下是一个简单的jQuery示例: ```javascript $("#country").on("change", function() { var countryId = $(this).val(); $.ajax({ url: "getProvinces.php", type: "POST", data: { country_id: ...

    城市级联实例 4种实现方式 实在好用

    至于文件列表中的"4种全面省份城市级联例子.rar",这很可能是一个包含示例代码和数据的压缩包,提供了四种不同实现方法的完整示例。下载并解压后,开发者可以参考这些代码来学习和理解城市级联的实现过程。而"3C3N...

    好用简单的可编辑级联下拉框

    "好用简单的可编辑级联下拉框"就是一个旨在提升用户体验的组件,它将传统的静态下拉框与级联选择功能相结合,并引入了编辑能力,使得用户在选择过程中能够更加灵活和高效。 首先,我们要理解什么是“可编辑下拉框”...

Global site tag (gtag.js) - Google Analytics