JS练习源码04_下拉级联框

最新推荐文章于 2023-06-02 17:16:54 发布

菲儿啊

最新推荐文章于 2023-06-02 17:16:54 发布

阅读量172

点赞数 1

分类专栏： HTML5 CSS JS

本文链接：https://blog.csdn.net/qq_37717494/article/details/104515518

版权

HTML5 CSS JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

界面：
在这里插入图片描述
源码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#top {
				background-color: #87CEFA;
			}
			
			label {
				color: #ffffff;
			}
		</style>
		<script type="text/javascript">
			var provs = new Array(); //数组，集合
			provs['北京市'] = ['北京市'];
			provs['上海市'] = ['上海市'];
			provs['天津市'] = ['天津市'];
			provs['重庆市'] = ['重庆市'];
			provs['湖北省'] = ['武汉市', '黄石市', '宜昌市', '洪湖市'];
			provs['湖南省'] = ['长沙市', '常德市', '岳阳市'];

			var wuyeTypes = ['普通住宅', '公寓', '别墅', '经济适用房', '商住楼', '写字楼'];

			function load() {
				loadProvice();
				loadType();
			}
			//加载省份
			function loadProvice() {
				document.getElementById("provice").options.add(new Option("-请选择城市-", ""));
				for(var i in provs) {
					document.getElementById("provice").options.add(new Option(i, i));
				}
			}

			//加载城市
			function loadCity() {
				var selectedPro = document.getElementById("provice").value;
				//先清空城市列表
				document.getElementById("city").options.length = 0;
				for(var i in provs) {
					if(i == selectedPro) { //判断是否为选中的省份
						for(var j in provs[i]) {
							document.getElementById("city").options.add(new Option(provs[i][j], provs[i][j]));
						}
					}
				}
			}
			//加载物业类型
			function loadType() {
				document.getElementById("wuyeType").options.add(new Option("物业类型", ""));
				for(var i in wuyeTypes) {
					document.getElementById("wuyeType").options.add(new Option(wuyeTypes[i], wuyeTypes[i]));
				}
			}
		</script>
	</head>

	<body οnlοad="load()">
		<img src="img/option-top.jpg" />
		<div id="top">
			<form>
				<table>
					<tr>
						<td><label>房源查询：</label></td>
						<td><select id="provice" οnchange="loadCity()"></select></td>
						<td><select id="city" style="width: 100px;"></select></td>
						<td><select id="wuyeType"></select></td>
						<td><input type="button" value="查询" style="width: 60px;" /></td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

菲儿啊

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS练习源码04_下拉级联框

界面：源码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> #top { background-color: #87CEFA; } label { ...
复制链接

扫一扫