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)文章
一文詳解preact的高性能狀態(tài)管理Signals
這篇文章主要介紹了一文詳解preact的高性能狀態(tài)管理Signals,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2022-09-09
jscript之Open an Excel Spreadsheet
jscript之Open an Excel Spreadsheet...2007-06-06
BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼
這篇文章主要介紹了BootStrap表單驗(yàn)證 FormValidation 調(diào)整反饋圖標(biāo)位置的實(shí)例代碼,需要的朋友可以參考下2017-05-05
js利用FileReader實(shí)現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像
本文主要介紹了js利用FileReader實(shí)現(xiàn)圖片轉(zhuǎn)base64格式并上傳預(yù)覽頭像,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
關(guān)于JavaScript語(yǔ)句后面的分號(hào)問(wèn)題
下面通過(guò)本文給大家詳細(xì)介紹javascript中的語(yǔ)句后面的分號(hào)問(wèn)題,本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2017-12-12

