JavaScript取数组数据动态生成下拉列表

最新推荐文章于 2025-05-14 10:37:45 发布

原创最新推荐文章于 2025-05-14 10:37:45 发布 · 8.5k 阅读

9 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态生成下拉选择框的方法，并提供了完整的HTML和JavaScript代码示例。示例中展示了如何根据预定义的数组创建两个下拉框，分别用于选择民族和学历。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此处为了简便，直接使用js数组，在实际开发中，也开始使用服务器端传回前台的数据来生成数组，然后再进行下拉框的创建。话不多说，直接上代码。

<html>
<head>
<script>
	var arrayNation = new Array('汉族','蒙古族','彝族','侗族','哈萨克族');
	var arrayDegree = new Array('小学','初中','高中','中专','大专','本科','硕士','博士');
	
	function createSelect(name, str){
		var _select = document.createElement("select");
		var firstOption = document.createElement("option");
		firstOption.value = "------select------";
		firstOption.text = "------请选择------";
		_select.appendChild(firstOption);
		for ( i = 0; i < str.length; i++){
			var _option = document.createElement("option");
			_option.value = str[i];
			_option.text = str[i];
			if (name == str[i]){
				_option.selected = "true";
			}
			_select.appendChild(_option);
		}
		return _select;
	}
</script>
</head>
<body>
<div id="nation">民族：</div>
<div id="degree">学历：</div>
<script>
	document.getElementById("nation").appendChild(createSelect('侗族', arrayNation));
	document.getElementById("degree").appendChild(createSelect('初中', arrayDegree));
</script>
</body>
</html>