JS动态增加删除UL节点LI及相关内容示例


Posted in Javascript onMay 21, 2014
<ul id="ul"> <li id=1>11111111111111111<a href="javascript:del(1);">del</a></li> 
<li id=2 >22222222222222222<a href="javascript:del(2);">del</a></li> 
<li id=3>33333333333333333<a href="javascript:del(3);">del</a></li> 
<li id=4>44444444444444444<a href="javascript:del(4);">del</a></li> 
<li id=5>55555555555555555<a href="javascript:del(5);">del</a></li> 
</ul> 
<select name="car_type" id="car_type" onchange="add_car(this);" > 
<option value="">please select</option> 
<option value="car_11">11111</option> 
<option value="car_22">22222</option> 
<option value="car_33">33333</option> 
<option value="car_44">44444</option> 
</select > 
<input type="text" id="ul_value" onclick="getulvalue();" name="ul_value" value=""> 
<script> 
function $$(id){ 
var obj=document.getElementById(id); 
return obj; 
} 
function del(n) { 
$$('ul').removeChild($$(n)); 
} 
function add(id,txt) { 
var ul=$$('ul'); 
var li= document.createElement("li"); 
var href_a = document.createElement("a"); 
href_a.href="javascript:del('"+id+"');"; 
href_a.innerHTML ="del"; 
li.innerHTML=txt; 
li.id=id; 
li.appendChild(href_a); 
ul.appendChild(li); 
} 
function add_car(obj){ 
//chk ul childNodes length 
if($$('ul').childNodes.length<3){ 
var flag=true; 
var ul_obj=$$('ul').childNodes; 
var car_id=obj.options[obj.selectedIndex].value; 
var txt=obj.options[obj.selectedIndex].text; 
if(car_id!=null&&car_id!=""){ 
for(var i=0;i<ul_obj.length;i++){ 
if(ul_obj[i].id==car_id){ 
alert("已经添加!"); 
flag=false; 
} 
} 
if(flag){ 
add(car_id,txt); 
} 
} 
}else{ 
alert("只允许加入三个值!"); 
return; 
} 
} 
function getulvalue(){ 
if($$('ul').childNodes.length==0){ 
alert("请选择相关内容!"); 
return; 
}else{ 
var txt=""; 
for(var i=0;i<$$('ul').childNodes.length;i++){ 
txt+=$$('ul').childNodes[i].id+","; 
} 
$$("ul_value").value=txt; 
} 
} 
</script>
Javascript 相关文章推荐
我见过最全的个人js加解密功能页面
Dec 12 Javascript
js更优雅的兼容
Aug 12 Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
vue-router实现webApp切换页面动画效果代码
May 25 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
JavaScript常用工具函数汇总(浏览器环境)
Sep 17 Javascript
jQuery异步验证用户名是否存在示例代码
May 21 #Javascript
jQuery取id有.的值的方法
May 21 #Javascript
jQuery判断复选框是否勾选的原理及示例
May 21 #Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 #Javascript
JS 弹出层 定位至屏幕居中示例
May 21 #Javascript
Jquery实现的角色左右选择特效
May 21 #Javascript
jquery $.trim()方法使用介绍
May 21 #Javascript
You might like
PHP中上传大体积文件时需要的设置
2006/10/09 PHP
在PHP中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
JavaScript避免代码的重复执行经验技巧分享
2014/04/17 Javascript
利用js制作html table分页示例(js实现分页)
2014/04/25 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
2015/09/11 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
基于Node.js搭建hexo博客过程详解
2019/06/25 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
谈谈Python进行验证码识别的一些想法
2016/01/25 Python
Python生成器以及应用实例解析
2018/02/08 Python
python pycurl验证basic和digest认证的方法
2018/05/02 Python
django的model操作汇整详解
2019/07/26 Python
python 上下文管理器及自定义原理解析
2019/11/19 Python
python+opencv实现移动侦测(帧差法)
2020/03/20 Python
英国最红的高街时尚品牌:Topshop
2016/08/05 全球购物
美国受欢迎的眼影品牌:BH Cosmetics
2016/10/25 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
HOTEL INFO英国:搜索全球酒店
2019/08/08 全球购物
音乐教学随笔感言
2014/02/19 职场文书
早会主持词
2014/03/17 职场文书
迎国庆横幅标语
2014/10/08 职场文书
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers