级联下拉列表

//根据所选的省,自动生成对应的市

<html>
	<head>
		<title>级联列表</title>
		<meta http-equiv='Content-Type' content='text/css;charset=utf-8'/>
		<style>
			.yemian{
				margin-left:30%;
				text-align:center;
				font-size:50px;
				width:500px;
				height:500px;
				background-color:blue;
			}
			.s{
				width:120px;
				height:25px;
			}
		</style>
		<script>
			function st(){

				var sheng=document.getElementById('sheng');
				//存省的数组,可自行添加
				var shengs=new Array(new Option("--请选择省--",''),new Option("湖南","hn"),new Option("广东","gd"));
				for(var i=0;i<shengs.length;i++){
					sheng.options[i]=shengs[i];
				}
			}
			//存市的数组,根据省的数组添加
			var shis=new Array();
			shis[0]=new Array(new Option("--请选择市--",''));
			shis[1]=new Array(new Option("长沙",'cs'),new Option("娄底",'ld'),new Option("永州",'yz'));
			shis[2]=new Array(new Option("广州",'gz'),new Option("深圳",'sz'));
			function change(obj){
				var shi=document.getElementById('shi');
				shi.options.length=0;
				var index=sheng.selectedIndex;
				for(var x in shis[index]){
					shi.options[x]=shis[index][x]
				}
			}
		</script>
	</head>
	<body  onload="st()">
		<div class='yemian' >
			<div class="top">级联下拉列表</div>
			<select class='s' id='sheng' onchange='change(this)'>
				<option value=''>--请选择省--</option>
			</select>
			<select class='s' id='shi'>
				<option value=''>--请选择市--</option>
			</select>
		</div>
	</body>

</html>

级联下拉列表,布布扣,bubuko.com

时间: 2024-08-02 02:44:24

级联下拉列表的相关文章

原生js实现级联下拉列表

<!DOCTYPE> <html> <head> <title>级联下拉列表</title> <meta charset="UTF-8"> </head> <body > <div> <select class='prov' id='prov' onchange='changeCity()'> <option value=''>--请选择省--</o

三种省市级联下拉列表的写法

一般我们如果实现省市级联效果,思路大致都如下: 1.利用省份下拉框的选项改变事件onChange 2.根据用户选择的省份,动态添加城市下拉框的值 第一种方式,也是最原始的方式 <span style="font-size: large;"><HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312">

thinkPHP中省市级联下拉列表

公共函数放置位置common文件夹下common.php文件(此段代码也可放置在要使用的控制器中) 封装的下拉列表函数代码: /** * 根据列表拼装成一个下拉列表 ADD BY CK * @param $list :数据源 * @param $value :显示的option的value值,下标 例:$list['id']中的id * @param $text :显示的option的text值 例:$list['name']中的name * @param int $selectIndex :

完整中英文世界国家级联下拉列表插件【前端版】

这个小东西是之前小项目上临时增加功能的产物,那时候在网上找了很久都没有能用的插件,要么是数据残缺少得可怜,还有就是实现手段非常低效不可维护那种,各种奇拔问题!反正就没有逞心如意!那时候又急需要这样一个功能,百般无奈后灵机一动,想起某企鹅功能选项不是有这样的世界国家级联功能嚒!那肯定有地方存着这数据的哇!嘿嘿!心里突然暗喜,终于有方向,然后就是向这企鹅开刀找!在某个i18n国际化文件夹中找到了!立马放下心头大石!   这样子中英文版本的数据都有了!但是问题又来了!该怎么开始做呢? 怎么去调用这个数

struts2 级联下拉列表框 简单的

废话不说,先上效果图 jap代码: 1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <%@ taglib prefix="s" uri="/struts-tags"%> 4 <!DOCTYPE html PUBLIC "-//W3C

js基于json的级联下拉框

级联下拉列表是项目中常用到的.比如省市县,比如企业性质等,做成一个js通用组件, 在静态页出来后可以直接插入,将数据和html静态页做一个解耦. 贴出来抛砖引玉吧. <html> <script type="text/javascript"> /** 基于json的级联下拉列表,支持初始化 调用eg: var comboselect = ComboSelectFactory(data, 'p1', 'p2', 'p3', 'p4'); 设定下拉列表value,t

Ajax常用实例

摘录自:http://www.cnblogs.com/gaopeng527/p/4459622.html 1. 级联下拉列表 例1.1 级联下拉列表. (1)编写AjaxRequest.js文件,并将其保存到JS文件夹中.AjaxRequest.js的具体代码如下: var net = new Object(); //定义一个全局变量net //编写构造函数 net.AjaxRequest=function(url,onload,onerror,method,params){ this.req

二级联动列表

<!DOCTYPE HTML><html><head><title>二级联动列表</title><meta charset="utf-8" /><style> .hide{ display: none; }</style><script> /*实现“省”和“市”的级联下拉列表*/ var cities=[[], /*0号下标没有元素*/[{"name":'东城

Java开源项目(备查)

转自:http://www.blogjava.net/Carter0618/archive/2008/08/11/221222.html Spring Framework  [Java开源 J2EE框架] Spring 是一个解决了许多在J2EE开发中常见的问题的强大框架. Spring提供了管理业务对象的一致方法并且鼓励了注入对接口编程而不是对类编程的良好习惯.Spring的架构基础是基于使用JavaBean属性的 Inversion of Control容器.然而,这仅仅是完整图景中的一部分