复制代码 代码如下:
<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>
<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>
标签:
增加删除,UL节点
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
暂无“JS动态增加删除UL节点LI及相关内容示例”评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新动态
2024年05月09日
2024年05月09日
- 群星.1999-98滚石年度最卖座主打歌刷新全纪录·新台湾女人【滚石】【WAV+CUE】
- 宝藏归离任务怎么做?宝藏归离任务攻略
- 原画壁纸及美图第209期,无水印可自取
- 原画壁纸及美图第210期,无水印可自取
- 西游笔绘西行紫界演武怎么过 紫界演武通关攻略
- 西游笔绘西行沙河逐风怎么过 沙河逐风通关攻略
- 崩坏星穹铁道椒丘阵容怎么搭 崩铁椒丘组队阵容推荐
- 奥斯卡视觉奖《哥斯拉-1》,好坏参半的70周年纪念作
- 跟你走的话会被嘎蛋吗 囧图 深得自媒体新闻学的真传
- 国产游戏产业:为何手游成为新宠?
- 谭艳《再度重相逢HQ》头版限量编号[低速原抓WAV+CUE]
- ABC德国制《姚公白·三千年古琴艺术》6N纯银镀膜[低速原抓WAV+CUE]
- 群星1990-似曾相识1--2[日本天龙1A1首版][WAV+CUE]
- 《地狱潜者2》诞生大量梗图:索尼毁了一款GOTY潜力之作
- 五一档电影导演:绝不撤档!可以战死但不退