JS动态增加删除UL节点LI及相关内容示例

前端技术 2023/09/08 JavaScript
复制代码 代码如下:

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

本文地址:https://www.stayed.cn/item/21585

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。