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构建JSON格式字符串实现步骤
Mar 22 Javascript
向左滚动文字 js代码效果
Aug 17 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
vue.js实现备忘录功能的方法
Jul 10 Javascript
Vue中如何实现proxy代理
Apr 20 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
Vue 组件注册实例详解
Feb 23 Javascript
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
Vue Element plus使用方法梳理
Dec 24 Vue.js
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开发中常用的8个小技巧
2008/08/27 PHP
smarty中post用法实例
2014/11/28 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
js 操作select和option常用代码整理
2012/12/13 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
jquery 自定义容器下雨效果可将下雨图标改为其他
2014/04/23 Javascript
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jQuery AjaxUpload 上传图片代码
2016/02/02 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
Vue.js每天必学之Class与样式绑定
2016/09/05 Javascript
浅谈angularjs module返回对象的坑(推荐)
2016/10/21 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python正则表达式的使用
2017/06/12 Python
python中Apriori算法实现讲解
2017/12/10 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Python3的unicode编码转换成中文的问题及解决方案
2019/12/10 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Django contrib auth authenticate函数源码解析
2020/11/12 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
项目投资合作意向书
2014/07/29 职场文书
社区综治工作汇报
2014/10/27 职场文书
交通安全月活动总结
2015/05/08 职场文书
边城读书笔记
2015/06/29 职场文书
2016高考寄语或鼓励的话语
2015/12/04 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
mysql定时自动备份数据库的方法步骤
2021/07/07 MySQL
Python测试框架pytest高阶用法全面详解
2022/06/01 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript