JS動(dòng)態(tài)增加刪除UL節(jié)點(diǎn)LI及相關(guān)內(nèi)容示例
更新時(shí)間:2014年05月21日 17:26:45 作者:
這篇文章主要介紹了JS如何動(dòng)態(tài)增加刪除UL節(jié)點(diǎn)LI及相關(guān)內(nèi)容,需要的朋友可以參考下
復(fù)制代碼 代碼如下:
<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("已經(jīng)添加!");
flag=false;
}
}
if(flag){
add(car_id,txt);
}
}
}else{
alert("只允許加入三個(gè)值!");
return;
}
}
function getulvalue(){
if($$('ul').childNodes.length==0){
alert("請(qǐng)選擇相關(guān)內(nèi)容!");
return;
}else{
var txt="";
for(var i=0;i<$$('ul').childNodes.length;i++){
txt+=$$('ul').childNodes[i].id+",";
}
$$("ul_value").value=txt;
}
}
</script>
您可能感興趣的文章:
- JS遍歷ul下的li點(diǎn)擊彈出li的索引的實(shí)現(xiàn)方法
- Jquery和JS獲取ul中l(wèi)i標(biāo)簽的實(shí)現(xiàn)方法
- javascript操作ul中l(wèi)i的方法
- js 動(dòng)態(tài)添加元素(div、li、img等)及設(shè)置屬性的方法
- js 獲取元素下面所有l(wèi)i的兩種方法
- Javascript 獲取LI里的內(nèi)容
- JS獲取checkbox的個(gè)數(shù)簡(jiǎn)單實(shí)例
- js獲取對(duì)象、數(shù)組的實(shí)際長(zhǎng)度,元素實(shí)際個(gè)數(shù)的實(shí)現(xiàn)代碼
- js獲取下拉列表的值和元素個(gè)數(shù)示例
- JavaScript獲取多個(gè)數(shù)組的交集簡(jiǎn)單實(shí)例
- js限制checkbox勾選的個(gè)數(shù)以及php獲取多個(gè)checkbbox的方法深入解析
- JavaScript獲取ul中l(wèi)i個(gè)數(shù)的方法
相關(guān)文章
微信小程序?qū)崿F(xiàn)注冊(cè)登錄功能(表單校驗(yàn)、錯(cuò)誤提示)
這篇文章主要介紹了微信小程序 實(shí)現(xiàn)注冊(cè)、登錄功能(表單校驗(yàn)、錯(cuò)誤提示),本文通過(guò)代碼給大家詳細(xì)介紹,需要的朋友可以參考下2019-12-12Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)(mysql)傻瓜式教程(二)
這篇文章主要介紹了Express實(shí)現(xiàn)前端后端通信上傳圖片之存儲(chǔ)數(shù)據(jù)庫(kù)(mysql)傻瓜教程(二)的相關(guān)資料,需要的朋友可以參考下2015-12-12layui復(fù)選框限制選擇個(gè)數(shù)的方法
今天小編就為大家分享一篇layui復(fù)選框限制選擇個(gè)數(shù)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09from 表單提交返回值用post或者是get方法實(shí)現(xiàn)
from 表單提交的返回值可以用jquery的post或者是get方法去實(shí)現(xiàn),具體如下,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08微信小程序中做用戶登錄與登錄態(tài)維護(hù)的實(shí)現(xiàn)詳解
微信小程序的運(yùn)行環(huán)境不是在瀏覽器下運(yùn)行的。所以不能以cookie來(lái)維護(hù)登錄態(tài)。下面這篇文章主要給大家介紹了微信小程序中如何做用戶登錄與登錄態(tài)維護(hù)的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考學(xué)習(xí)。2017-05-05跟我學(xué)習(xí)javascript的var預(yù)解析與函數(shù)聲明提升
跟我學(xué)習(xí)javascript的var預(yù)解析與函數(shù)聲明提升,小編對(duì)var預(yù)解析與函數(shù)聲明提升知識(shí)點(diǎn)也不甚了解,和大家一起學(xué)習(xí)本篇文章。2015-11-11當(dāng)json鍵為數(shù)字時(shí)的取值方法解析
對(duì)于數(shù)字鍵名或者非正常變量字符(比如有空格),必須使用 aa[x]的方式2013-11-11