JavaScript动态增加删除UL节点LI及相关内容

来源：互联网发布：mac装win7鼠标不能动编辑：程序博客网时间：2024/05/18 15:53
<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>
1 0