Jquery动态添加元素--简单样例-优快云博客

本文提供了一个使用jQuery实现动态添加元素的示例。当用户在select框中选择不同的选项时，可以在页面上动态地添加一个文本框或者另一个select框，并确保每次只有一个额外的输入控件可见。

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

今天同事问了个问题：

写道

知道怎么写js实现这个功能么？
在select中，选择1，在select后面出现一个文本框
选择2，在select后面出现一个select
这个文本框和select名字一样，只能出现一个

这样子

对于这种需求，想必大家都遇到过，也都解决过。

给同事写了个简单样例，顺手贴出来，算是随笔吧，也为以后书写js方面的资料开个头，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="../../jslib/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
	//Jquery动态添加元素--简单样例
	$(function() {
		$("#xselectop").change(function() {
			var $xaddElement = $("#xaddElement");
			var xtext = "<input type='text' name='xtest' value='xtext'/>";
			var xselect = "<select name='xtest'><option value='1'>-----</option><option value='1'>文本框</option><option value='2'>下拉框</option></select>";
			
			var opval = this.value;
			if("1" == opval) {
			    $xaddElement.empty();
				$xaddElement.append(xtext);
			} else if("2" == opval) {
				$xaddElement.empty();
				$xaddElement.append(xselect);
			}
		});
	});
</script>
</head>
<body>
	<select id="xselectop">
		<option value="1">-----</option>
		<option value="1">文本框</option>
		<option value="2">下拉框</option>
	</select>
	<div id="xaddElement"></div>
</body>
</html>