JS动态创建input和span并从后台加载数据

最新推荐文章于 2024-07-16 17:26:59 发布

Of Chen

最新推荐文章于 2024-07-16 17:26:59 发布

阅读量3.9k

点赞数

分类专栏：记录帖文章标签： js input span checkbox 下拉多选

本文链接：https://blog.csdn.net/cjiankai/article/details/85632198

版权

记录帖专栏收录该内容

8 篇文章 0 订阅

订阅专栏

解决：动态创建input和span

由于我是想实现一个下拉多选的效果，作为后端狗，真是脑壳疼呀，效果看图：

先新建一个Html文件和js文件夹，将jquery-1.8.3.js放入js文件夹如下 示例代码.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态创建input和span</title>
<script type="text/javascript" src="js/jquery-1.8.3.js"></script> 
<script>
	$(function(){
		//搞两个数组做测试数据,实际是从后台通过Ajax异步获取数据
		var val = ["张三","李四","王五"];					
		for(var i = 0; i<val.length;i++){
			$("#opts").append("<input type='checkbox' name='userName1' value='"+val[i]+"'><span>"+val[i]+"</span><br/>");
		}				
	}); 
</script> 
<style>
	*{
		margin: 0px;
		padding: 0px;
	}	
	#dv{
		width: 100px;
		height: 100px;
		background-color: yellow;
		margin: 0px auto 0px;
	}	
</style>
</head>
<body>
	<div id="optips"></div>	
</body>
</html>