JS動態(tài)增加刪除UL節(jié)點LI及相關內(nèi)容示例
更新時間:2014年05月21日 17:26:45 作者:
這篇文章主要介紹了JS如何動態(tài)增加刪除UL節(jié)點LI及相關內(nèi)容,需要的朋友可以參考下
復制代碼 代碼如下:
<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("只允許加入三個值!");
return;
}
}
function getulvalue(){
if($$('ul').childNodes.length==0){
alert("請選擇相關內(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點擊彈出li的索引的實現(xiàn)方法
- Jquery和JS獲取ul中l(wèi)i標簽的實現(xiàn)方法
- javascript操作ul中l(wèi)i的方法
- js 動態(tài)添加元素(div、li、img等)及設置屬性的方法
- js 獲取元素下面所有l(wèi)i的兩種方法
- Javascript 獲取LI里的內(nèi)容
- JS獲取checkbox的個數(shù)簡單實例
- js獲取對象、數(shù)組的實際長度,元素實際個數(shù)的實現(xiàn)代碼
- js獲取下拉列表的值和元素個數(shù)示例
- JavaScript獲取多個數(shù)組的交集簡單實例
- js限制checkbox勾選的個數(shù)以及php獲取多個checkbbox的方法深入解析
- JavaScript獲取ul中l(wèi)i個數(shù)的方法
相關文章
微信小程序實現(xiàn)注冊登錄功能(表單校驗、錯誤提示)
這篇文章主要介紹了微信小程序 實現(xiàn)注冊、登錄功能(表單校驗、錯誤提示),本文通過代碼給大家詳細介紹,需要的朋友可以參考下2019-12-12Express實現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫(mysql)傻瓜式教程(二)
這篇文章主要介紹了Express實現(xiàn)前端后端通信上傳圖片之存儲數(shù)據(jù)庫(mysql)傻瓜教程(二)的相關資料,需要的朋友可以參考下2015-12-12from 表單提交返回值用post或者是get方法實現(xiàn)
from 表單提交的返回值可以用jquery的post或者是get方法去實現(xiàn),具體如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-08-08微信小程序中做用戶登錄與登錄態(tài)維護的實現(xiàn)詳解
微信小程序的運行環(huán)境不是在瀏覽器下運行的。所以不能以cookie來維護登錄態(tài)。下面這篇文章主要給大家介紹了微信小程序中如何做用戶登錄與登錄態(tài)維護的相關資料,文中介紹的非常詳細,需要的朋友可以參考學習。2017-05-05跟我學習javascript的var預解析與函數(shù)聲明提升
跟我學習javascript的var預解析與函數(shù)聲明提升,小編對var預解析與函數(shù)聲明提升知識點也不甚了解,和大家一起學習本篇文章。2015-11-11