select.html

来自「用于编些网站的Javascript」· HTML 代码 · 共 57 行

HTML
57 行
字号 
<html> 
	<head> 
		<script language="javascript">  
			var arrBeijing = ["崇文","海淀","宣武","昌平","朝阳"];
			var arrShanghai = ["虹桥","徐汇","浦东","黄浦江","城隍庙"]; 
			var arrHebei = ["石家庄", "廊坊", "保定", "沧州", "邯郸","张家口","承德"];
			
			function getArr(proValue){
				if(proValue == "beijing"){
					return arrBeijing;	
				}else if(proValue == "shanghai"){
					return arrShanghai;	
				}else if(proValue == "hebei"){
					return arrHebei;	
				}	
			}
			
			function changeCity(){
				var selP = document.getElementById("selP");
				//options --> 返回select对象中所有的option对象
				var opts = selP.options; 
				//selectedIndex --> 返回当前选中option的下标
				var optIndex = opts.selectedIndex;	        
				var opt = opts[optIndex];
				var optValue = opt.value;  
				
				//获得城市列表
				var arr = getArr(optValue);
				
				//清空城市列表
				var selC = document.getElementById("selC");
				selC.length = 0;
				
				//添加城市列表
				for(var i=0; i<arr.length; i++){
					//扩充城市列表长度
					selC.length += 1;
					//添加一个option
					var newOp = new Option(arr[i],arr[i]);	 
					selC.options[i] = newOp;
				}
			}
		</script>
	</head>
	<body> 
		省份:
		<select id="selP" onchange="changeCity()"> 
			<option value="beijing">北京</option> 
			<option value="shanghai">上海</option>
			<option value="hebei">河北</option>
		</select>
		城市(区):
		<select id="selC">
			<option>请选择</option> 
		</select>
	</body>
</html>

select.html - 源码说明

本页面展示了「用于编些网站的Javascript」中的 select.html 源码文件，采用 HTML 编程语言编写，共 57 行代码。您可以在线阅读完整代码内容，也可以返回资源详情页下载完整源码包进行本地学习和开发。

虫虫开发者社区收录了大量与JavaScript相关的技术资源，包括源代码、技术文档、电路图等，是电子工程师和嵌入式开发者的专业学习平台。

⌨️ 快捷键说明

复制代码Ctrl + C
搜索代码Ctrl + F
全屏模式F11
增大字号Ctrl + =
减小字号Ctrl + -
显示快捷键?