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 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
ExtJS Store的数据访问与更新问题
Apr 28 Javascript
详细解密jsonp跨域请求
Apr 15 Javascript
纯js实现瀑布流布局及ajax动态新增数据
Apr 07 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
Feb 19 Javascript
Vue中定义全局变量与常量的各种方式详解
Aug 23 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
Vue修改项目启动端口号方法
Nov 07 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
微信小程序利用button控制条件标签的变量问题
Mar 15 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 cURL和Rolling cURL并发方式比较
2013/10/30 PHP
YII2框架中excel表格导出的方法详解
2017/07/21 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
JS JavaScript获取Url参数,src属性参数
2021/03/09 Javascript
AppBaseJs 类库 网上常用的javascript函数及其他js类库写的
2010/03/04 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
用C/C++来实现 Node.js 的模块(一)
2014/09/24 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
第一次接触神奇的Bootstrap导航条
2016/08/09 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
JS中队列和双端队列实现及应用详解
2020/09/29 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
基于python的多进程共享变量正确打开方式
2018/04/28 Python
利用Python的sympy包求解一元三次方程示例
2019/11/22 Python
python中with用法讲解
2020/02/07 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
大学生毕业求职简历的自我评价
2013/10/24 职场文书
大学生咖啡店创业计划书
2014/01/21 职场文书
毕业生自荐书
2014/02/02 职场文书
应届生求职信范文
2014/05/26 职场文书
工地标语大全
2014/06/18 职场文书
宣传标语大全
2014/07/01 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
python多线程方法详解
2022/01/18 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
微信小程序 根据不同用户切换不同TabBar
2022/04/21 Javascript