Jquery动态添加及删除页面节点元素示例代码
2018-10-12 14:01
946 查看
通常我们会遇到选中某个条件,然后添加,累计多个后,再进行执行。
废话不多说,直接上代码!
废话不多说,直接上代码!
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery动态添加及删除页面节点</title>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><!--引用jqurey库文件-->
<style>
.container{ width:1000px; margin:0 auto;}
.top{ height:25px; line-height:25px;}
.top select{ width:80px; height:22px; line-height:22px;}
.top input{ width:56px; height:22px;}
.add{ line-height:30px;}
li{ list-style:none;}
span{cursor:pointer;}
</style>
<script>
$(function(){//页面加载完毕后执行
$("input").click(function(){//添加操作
var getval=$("select").val();//获取当前选中的select值
$("p").before('<li>'+getval+'<span>X</span></li>');//在p标签前加入所要生成的代码
});
});
$("span").live("click",function(){//通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素)
$(this).parent().remove();//移除当前点击元素的父元素
});
</script>
</head>
<body>
<div class="container">
<div class="top">
<select>
<option>我是一号</option>
<option>我是二号</option>
<option>我是三号</option>
<option>我是四号</option>
<option>我是五号</option>
</select>
<input value="添 加" type="button"/>
</div>
<div class="add"><p></p></div>
</div>
</body>
</html>
您可能感兴趣的文章:
相关文章推荐
- Jquery动态添加及删除页面节点元素示例代码
- Jquery动态添加及删除页面节点元素
- document对象 动态的创建元素(节点)/添加元素(节点)/删除元素(节点)
- jQuery动态添加删除select项(实现代码)
- JQuery给select添加/删除节点的实现代码
- vue和Jquery差别之动态添加删除元素
- jQuery动态添加删除与添加表行代码
- jQuery动态添加的元素绑定事件处理函数代码
- 如何来使用jquery动态的往页面添加元素
- jquery动态添加删除一行数据示例
- jQuery实现的简单动态添加、删除表格功能示例
- JQuery给元素添加/删除节点比如select
- JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
- jQuery 实时保存页面动态添加的数据的示例
- jQuery页面元素动态添加后绑定事件丢失方法,非 live
- jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
- 使用js对select动态添加和删除OPTION示例代码
- 利用js动态添加删除table行的示例代码
- 不刷新页面jQuery模糊搜索,第一种实现---动态删除、插入节点