jQuery实现动态添加输入框和实现下拉多选

最新推荐文章于 2024-07-19 03:19:36 发布

我是一只萌新小菜鸟

最新推荐文章于 2024-07-19 03:19:36 发布

阅读量1.5k

点赞数

分类专栏： jquery小练习文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/Denghalou/article/details/82703702

版权

jquery小练习专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了如何利用jQuery实现在页面上动态添加输入框，并实现下拉列表的多选功能。通过示例代码，读者可以学习到jQuery的选择器、事件处理和DOM操作等技巧，从而提升网页交互体验。

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.column{
				width: 100%;
			}
			
			.content{
				display: inline-block;
			}
			.del{
				position: relative;
				left: -7px;
				top: -5px;
			}
			.sel,.box{
				width: 150px;
			}
			
			.box{
				position: absolute;
				background: darkturquoise;
				border: solid 1px black;
			}
			#selImg{
				position: relative;
				left: -20px;
			}
		</style>
	</head>
	<body>
		<form>
			
			<div class="column">
				<span class="title">添加标签：</span>
				<div class="content">
					<span id="addTag">+</span>
				</div>
			</div>
			<div class="column">
				<span class="title">选择爱好：</span>
				<div class="content">
					<input type="text" name="selhobby" class="sel" id="selhobby"  disabled="disabled"/>
					<img src="img/sel.png" id="selImg" />
					<div class="box" hidden="hidden">
						<input type="checkbox" name="sels" value="Test1"/>Test1<br />
						<input type="checkbox" name="sels" value="Test2"/>Test2<br />
						<input type="checkbox" name="sels" value="Test3"/>Test3<br />
						<input type="checkbox" name="sels" value="Test4"/>Test4<br />
						<input type="checkbox" name="sels" value="Test5"/>Test5<br />
					</div>
				</div>
			</div>
		
		</form>
	</body>
	<script type="application/javascript">
		var flag = false;
		$(function(){
			
			$("#addTag").click(function(){
				$(this).parent().prepend("<div class='content'>"+
					"<input type='text' name='testAdd' />"+
					"<span name='testdel' class='del'>x</span>"+
					"</div>");
				$("span[name='testdel']").click(function(){
					$(this).parent().remove();
				});
					
			});
				
			$("#selImg").click(function(){
				$(".box").prop("hidden",flag);
				flag = !flag;
			});
			
			
			$(".box input").each(function(){
				$(this).click(function(){
					var f = $(this).is(":checked");
					var context = $("#selhobby").val();
					var index = context.indexOf($(this).val());
					if(f){
						if(index < 0){
							if(context.length <=1){
								context = $(this).val()
							}else{
								context += ";" + $(this).val();
							}
						}
					}else{
						if(index >= 0){
							if(index == 0){
								if(context.indexOf(";") < 0){
									context = context.replace($(this).val(), "");
								}else{
									context = context.replace($(this).val() + ";", "");
								}
								
							}else{
								context = context.replace(";" + $(this).val(), "");
							}
						}
					}
					$("#selhobby").val(context);
				});
			});
			
		})
	</script>
</html>