js dom树操作，在下拉框中添加删除html元素

在下，杨江河

于 2023-01-08 00:38:18 发布

阅读量192

点赞数 1

分类专栏： Mac开发文章标签： javascript html 前端

本文链接：https://blog.csdn.net/Rockandrollman/article/details/128597526

版权

Mac开发专栏收录该内容

294 篇文章 3 订阅

订阅专栏

本文展示了如何使用JavaScript函数`addCity()`和`removeCity()`来动态地向HTML下拉框中添加和删除选项元素。`addCity()`函数创建一个新的`option`元素并将其添加到ID为city的`select`元素中，而`removeCity()`函数则移除同一个下拉框中的第一个`option`元素。

摘要由CSDN通过智能技术生成

简介

js dom树操作，在下拉框中添加删除html元素

正文

function addCity(){
	//创建一个html元素
	var option_obj = document.createElement("option");
	//给html对象设置属性
	option_obj.value = 1;
	option_obj.innerHTML="上海";
	//找到select对象
	var select_obj = document.getElementById("city");
	//将option对象添加到select中
	select_obj.appendChild(option_obj);
}

function removeCity(){
	//1.找到select对象
	var select_obj = document.getElementById("city");
	//2.找到第一个option对象
	select_obj.removeChild(select_obj.options[0]);
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script  type="text/javascript" src="js/index5.js"></script>
	</head>
	<body>
		<input type="button" value="添加" onclick="addCity()"/>
		<input type="button" value="移除" onclick="removeCity()"/>
		<select id="city">
			<option value="0">请选择</option>
		</select>
	</body>
</html>