`

Jquery动态添加元素--简单样例

jQueryJavaScriptHTML 
阅读更多

今天同事问了个问题：

写道
知道怎么写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>

 

分享到：
| 第五讲：WEB项目-集成Flex3+BlazeDS3.2+S ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics