<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>
分享到:
相关推荐
在本文中,我们将详细探讨如何使用JavaScript动态地操作UL元素(无序列表)和其子元素LI(列表项)的增加和删除操作。 首先,创建基本的HTML结构是必要的。如示例所示,我们有一个UL元素,其ID为“ul”,里面包含了...
JavaScript动态添加Li元素是前端开发中常见的一项技术,可以将新的列表项(li元素)动态添加到现有的HTML文档中。在给定的文件内容中,包含了两种主要的技术实现:使用innerHTML和使用createElement。下面将对这两种...
### JavaScript 动态修改 Li 节点值的方法 #### 概述 在Web开发中,经常需要通过JavaScript来动态地操作DOM元素,比如修改列表项(`<li>`元素)的内容。这种需求常见于交互式的网站应用中,例如允许用户编辑页面上...
2. **子节点**:每个`<li>`元素表示一个节点,如果一个节点有子节点,则在其内部再嵌套一个`<ul>`,并用相应的`<li>`表示子节点。 3. **展开和折叠**:通过JavaScript或者CSS实现树的展开和折叠功能。可以添加额外的...
总之,"JS做的树形菜单,自定义添加节点"项目展示了JavaScript在创建动态、交互式用户界面方面的强大能力。通过理解DOM操作、事件处理、递归以及可能的CSS技巧,开发者可以创建出高效、可定制的树形菜单,满足各种...
如果某个li元素的className属性为“hover”,则说明它应该是被删除的元素,于是使用其父节点的“removeChild”方法将其从DOM中移除。值得注意的是,在移除元素后,循环的索引i需要减1,这是因为删除操作导致了数组...
本文将详细讲解如何利用JavaScript和ZTree实现一个功能,允许用户将左侧面板中的树节点动态拖放到右侧面板,并在右侧面板中动态加载相应的div和样式。 首先,ZTree是一个强大的JavaScript插件,它基于jQuery,主要...
在本文中,我们将深入探讨如何使用JavaScript动态修改`<li>`(列表项)节点的值,这对于创建交互式网页列表非常有用。 首先,我们需要理解HTML文档对象模型(DOM,Document Object Model)。DOM是HTML或XML文档的一...
通过JQuery,我们还可以轻松为li元素添加或删除class属性,从而改变其样式。例如,下面的代码示例了如何在点击li元素时,切换其背景色,并且改变其父元素ul的样式: ```javascript $(function() { $('.anserdh li'...
本知识点将详细介绍如何使用jQuery实现删除列表项(li节点)的方法。 ### jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库,它以简化HTML文档遍历和操作、事件处理、动画和Ajax交互而闻名。通过利用...
下面我们将深入探讨如何创建一个JS动态树菜单,并涉及相关的编程概念和技术。 首先,树菜单的基础是HTML结构。一个简单的树节点通常包含一个父级(根节点)和多个子节点。这些节点可以通过`<ul>`和`<li>`标签来表示...
我们可以使用DOM API来查找、遍历、修改甚至添加页面中的任何节点。例如,如果购物车页面有一个特定的ID为"cart-items"的`<div>`元素,我们可以使用JavaScript的`document.getElementById()`方法获取这个节点: ```...
JavaScript 相关内容感爱好的读者可查看本站专题:《JavaScript 操作 DOM 技巧总结》、《JavaScript 页面元素操作技巧总结》、《JavaScript 大事相关操作与技巧大全》、《JavaScript 查找算法技巧总结》、...
通过JavaScript,我们可以添加、修改或者删除HTML页面中的节点。其中,删除节点是一个常用的操作。在本例中,我们将详细介绍如何使用JavaScript的removeChild方法删除HTML中的所有子节点。 首先,需要了解的是,...
在树形结构中,`<ul>`通常用来表示一个层级,而`<li>`则表示该层级下的一个节点。通过嵌套`<ul>`和`<li>`,我们可以构建出多级的树形结构。 接下来,我们要引入JavaScript来实现拖曳功能。在ASP.NET中,虽然后端...
通过JavaScript对DOM的API进行操作,开发者可以读取文档中的节点,修改节点的内容,添加新的节点或者删除节点等。 现在,让我们详细介绍两种获取所有<li>元素的方法。 方法一:使用getElementById和...
该案例的重点在于使用JavaScript来处理用户输入的数据,并在网页上动态地添加和删除这些数据。虽然此案例没有涉及后端数据库的操作,但对于理解前端编程中的DOM操作、事件监听等核心概念具有重要意义。 #### 二、...