学步园

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