JS案例---省市联动 select标签的运用

最新推荐文章于 2024-06-16 01:11:10 发布

不是很喜欢打码的小手

最新推荐文章于 2024-06-16 01:11:10 发布

阅读量704

点赞数 1

文章标签： JS 笔记

本文链接：https://blog.csdn.net/weixin_42230478/article/details/81068773

版权

本次案例用到小知识，

Select对象事件 onchange 当改变选择时调用的事件

Select对象集合 options[ ] 返回包含下拉列表中的所有选项的一个数组

createElement() 方法通过指定名称创建一个元素

createTextNode() 可创建文本节点。

Document 对象属性和方法

document.activeElement	返回当前获取焦点元素
document.addEventListener()	向文档添加句柄
document.adoptNode(node)	从另外一个文档返回 adapded 节点到当前文档。
document.anchors	返回对文档中所有 Anchor 对象的引用。
document.applets	返回对文档中所有 Applet 对象的引用。注意: HTML5 已不支持 <applet> 元素。
document.baseURI	返回文档的绝对基础 URI
document.body	返回文档的body元素
document.close()	关闭用 document.open() 方法打开的输出流，并显示选定的数据。
document.cookie	设置或返回与当前文档有关的所有 cookie。
document.createAttribute()	创建一个属性节点
document.createComment()	createComment() 方法可创建注释节点。
document.createDocumentFragment()	创建空的 DocumentFragment 对象，并返回此对象。
document.createElement()	创建元素节点。
document.createTextNode()	创建文本节点。
document.doctype	返回与文档相关的文档类型声明 (DTD)。
document.documentElement	返回文档的根节点
document.documentMode	返回用于通过浏览器渲染文档的模式
document.documentURI	设置或返回文档的位置
document.domain	返回当前文档的域名。
document.domConfig	已废弃。返回 normalizeDocument() 被调用时所使用的配置。
document.embeds	返回文档中所有嵌入的内容（embed）集合
document.forms	返回对文档中所有 Form 对象引用。
document.getElementsByClassName()	返回文档中所有指定类名的元素集合，作为 NodeList 对象。
document.getElementById()	返回对拥有指定 id 的第一个对象的引用。
document.getElementsByName()	返回带有指定名称的对象集合。
document.getElementsByTagName()	返回带有指定标签名的对象集合。
document.images	返回对文档中所有 Image 对象引用。
document.implementation	返回处理该文档的 DOMImplementation 对象。
document.importNode()	把一个节点从另一个文档复制到该文档以便应用。
document.inputEncoding	返回用于文档的编码方式（在解析时）。
document.lastModified	返回文档被最后修改的日期和时间。
document.links	返回对文档中所有 Area 和 Link 对象引用。
document.normalize()	删除空文本节点，并连接相邻节点
document.normalizeDocument()	删除空文本节点，并连接相邻节点的
document.open()	打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。
document.querySelector()	返回文档中匹配指定的CSS选择器的第一元素
document.querySelectorAll()	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表
document.readyState	返回文档状态 (载入中……)
document.referrer	返回载入当前文档的文档的 URL。
document.removeEventListener()	移除文档中的事件句柄(由 addEventListener() 方法添加)
document.renameNode()	重命名元素或者属性节点。
document.scripts	返回页面中所有脚本的集合。
document.strictErrorChecking	设置或返回是否强制进行错误检查。
document.title	返回当前文档的标题。
document.URL	返回文档完整的URL
document.write()	向文档写 HTML 表达式或 JavaScript 代码。
document.writeln()	等同于 write() 方法，不同的是在每个表达式之后写一个换行符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			var provinces=[
				["广州市","潮州市","汕头市","深圳市"],
				["长沙市","岳阳市","株洲市","湘潭市"],
				["厦门市","福州市","漳州市","泉州市"]
			]
			function selectProvince(){
				var province=document.getElementById("province")
				//得到当前选中的是哪个省份
//				alert(province.value)
				var value=province.value;
				//从数组中取出对应的城市信息
				var cities=provinces[value];
				var city=document.getElementById("city")
				//清空select中的option
				city.options.length=1;
				for(var i=0;i<cities.length;i++){
//					alert(cities[i])
					var option1=document.createElement("option")
					var textNode=document.createTextNode(cities[i]);
					city.appendChild(option1);
					option1.appendChild(textNode)
				}
				
			}
		</script>
	</head>
	<body>
		<select onchange="selectProvince()" id="province">
			<option value="-1">--请选择--</option>
			<option value="0">广东省</option>
			<option value="1">湖南省</option>
			<option value="2">福建省</option>
		</select>
		<select id="city">
			<option>--请选择--</option>
		</select>
	</body>
</html>

不是很喜欢打码的小手

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS案例---省市联动 select标签的运用

本次案例用到小知识，Select对象事件 onchange 当改变选择时调用的事件Select对象集合 options[ ] 返回包含下拉列表中的所有选项的一个数组createElement() 方法通过指定名称创建一个元素createTextNode() 可创建文本节点。Document 对象属性和方法document.activeElement 返回当前获取焦点元...
复制链接

扫一扫