JavaScript动态增加删除UL节点LI及相关内容
2015-11-16 17:09
591 查看
<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>
相关文章推荐
- 需求分析过程中 项目里可能需要的技术点记录
- html、css、js、jsp注释
- 在时间属性上慎用Angular.js1.4的“angular.merge”函数
- JS Json字符串与Json对象之间的转换
- ArcGIS API for javascript开发笔记(五)——GP服务调用之GP模型的发布及使用详解
- ArcGIS API for javascript开发笔记(五)——GP服务调用之GP模型的发布及使用详解
- JavaScript函数参数传递
- JS实现点击按钮自动增加一个单元格
- JavaScript函数学习总结以及相关的编程习惯指南
- fastjson
- 简单理解JSP(三)
- 简单理解JSP(二)
- js实现获取div坐标的方法
- 简单理解JSP(一)
- Js获取当前日期时间及其它操作
- Js获取当前日期时间及其它操作
- ArcGIS API for javascript开发笔记(四)——GP服务调用之GP模型的规范化制作详解
- JS字符串函数
- ArcGIS API for javascript开发笔记(四)——GP服务调用之GP模型的规范化制作详解
- js 判断浏览器的类型和版本