JS動的追加ULノードLI削除

 
    
 
     
<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); 

} www.jbxue.com



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>