功能描述

页面上有两个下拉框，左边显示国家，右边显示城市，左边发生变化的时候，右边下拉选择内容同时发生变化，实现联动效果。
在这里插入图片描述

分析

  • HTML页面：第一个select标签绑定事件，在改变时触发事件。使用onchange。调用方法add1(value)，value表示当前改变的option的值。 
    <select id="country" style="width: 100px;" onchange="add1(this.value);">
	<option value="0">--请选择--</option>
	<option value="1">中国</option>
	<option value="2">美国</option>
	<option value="3">日本</option>
</select>
<select id="city" style="width: 100px;" >
	<option value="0">--请选择--</option>
</select>
  • 创建一个二维数组，存储数据 
    var arr = new Array(3);
	arr[0] = [" ", "--请选择--"];
	arr[1] = ["中国", "南京", "北京", "济南", "青岛"];
	arr[2] = ["休斯顿", "俄克拉马托", "费城", "底特律", "纽约"];
	arr[3] = ["日本", "东京", "大阪", "长崎", "广岛"];
  • 查找二维数组中相应的列，得到的也是一个数组。
    得到id为city的select对象。
    在第二个select标签中添加构造好的option。 
    function add1(val) {
	remove1();
	for(var i = 1; i < arr[val].length; i++) {
		var option1 = document.createElement("option");
		var text1 = document.createTextNode(arr[val][i]);
		option1.appendChild(text1);
		citysel.appendChild(option1);
	}
}
  • 每一次在添加的时候都是追加子节点操作，所以在切换的时候要把旧的option的清空一下，定义一个方法，调用方法即可。 
    function remove1() {
	var options = citysel.getElementsByTagName("option");
	for(var i = 0; i < options.length; i++) {
		citysel.removeChild(options[i]);
		i--;
	}
}

代码

<body>
	<select id="country" style="width: 100px;" onchange="add1(this.value);">
		<option value="0">--请选择--</option>
		<option value="1">中国</option>
		<option value="2">美国</option>
		<option value="3">日本</option>
	</select>
	<select id="city" style="width: 100px;" >
		<option value="0">--请选择--</option>
	</select>

</body>

<script type="text/javascript">
	var arr = new Array(3);
	arr[0] = [" ", "--请选择--"];
	arr[1] = ["中国", "南京", "北京", "济南", "青岛"];
	arr[2] = ["休斯顿", "俄克拉马托", "费城", "底特律", "纽约"];
	arr[3] = ["日本", "东京", "大阪", "长崎", "广岛"];

	var citysel = document.getElementById("city");

	function remove1() {
		var options = citysel.getElementsByTagName("option");
		for(var i = 0; i < options.length; i++) {
			citysel.removeChild(options[i]);
			i--;
		}
	}

	function add1(val) {
		remove1();
		for(var i = 1; i < arr[val].length; i++) {
			var option1 = document.createElement("option");
			var text1 = document.createTextNode(arr[val][i]);
			option1.appendChild(text1);
			citysel.appendChild(option1);
		}
	}
</script>
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

wireshark抓包之HTTP状态码200的异常

avatar 2048 AI社区
cover

高三因单词罚站的我，如今用AI造了个记忆神器，效率飙升10倍（含保姆级教程）

avatar 2048 AI社区

大模型微调技术深度解构：从原理到工业级实践的完整指南

从企业级服务器到手机终端，微调技术正在重塑AI落地的边界。开发者需要像外科医生般精准选择工具：面对复杂任务时祭出全量微调，资源受限时祭出QLoRA，多任务场景则善用混合策略。正如瑞士军刀通过模块组合实现百变功能，现代微调技术也正在构建AI应用的无限可能。立即尝试本文的选型决策树，在你的项目中开启高效微调之旅！

avatar 2048 AI社区