这是在做现在一个系统的时候需要实现这样的功能时做的，先放在这里，如果以后忘了还可以到这里来找找，有些时候还就记得有些东西写过，不过因为一段时间的原因，忘记了，如果再去翻原来的程序那无疑是很大的工作量。
这个主要的实现使用JAVASCRIPT实现动态增加、删除选择项，可以用到如文件上传，需要一次性上传多个文件或者是发送邮件时附件允许多个一样，并且可以实现动态增加、删除，原理一样，如果需要，将本程序更改一样就OK，为了知道效果，你可以把下面的源代码复制然后放到任何一个静态网页文件中，点击就可以看到效果：
<script language="javascript">
//设定用户需要的元件个数
function setComponent()
{
var str='';
var i=0;
var component_compose_ID='';//组成元件的ID字符串
if(!window.input.componentNum.value)
{
window.input.componentNum.value=1;
window.input.componentNum_hidden.value=1;
window.input.component_compose_ID.value=1;
str='<div id=component1_div>';
str+='<select name=component1>';
str+=document.input.hiddenValue.value;
str+='</select>';
str+='数量：<input type=text name=component1Num size=10>';
str+=' <input type=button onclick=delComponent(1) value=删除元件>';
str+='</div>';
}
else
{
window.input.componentNum_hidden.value=window.input.componentNum.value;
for(i=1;i<=window.input.componentNum.value;i++)
{
str+='<div id=component' + i + '_div>';
str+='<select name=component' + i + '>';
str+=document.input.hiddenValue.value;
str+='</select>';
str+='数量：<input type=text name=component'+i+'Num size=10>';
str+=' <input type=button onclick=delComponent('+i+') value=删除元件>';
str+='<br><br>';
str+='</div>';
component_compose_ID+=i;
}
window.input.component_compose_ID.value=component_compose_ID;
}
window.chooseComponent.innerHTML=str;
}
//增加一个元件项
function addComponent()
{
var i,j;//表示实际元件数量，j不一定是实际元件数量，表示元件的最大序号
//因为在删除的过程中，元件的实际数量会减少，但是元件的最大序号不会变
var hiddenStr;
var number_str_of_add;
if(!window.input.componentNum.value)
i=1;
else
i=eval(window.input.componentNum.value);
i++;
if(!window.input.componentNum_hidden.value)
{
j=1;
}
else
{
j=eval(window.input.componentNum_hidden.value);
}
j++;
number_str_of_add=window.input.component_compose_ID.value;
number_str_of_add+=j;
var str=window.chooseComponent.innerHTML;
str+='<div id=component' + j + '_div>';
str+='<select name=component' + j + '>';
str+=document.input.hiddenValue.value;
str+='</select>';
str+='数量：<input type=text name=component'+j+'Num size=10>';
str+=' <input type=button onclick=delComponent('+j+') value=删除元件>';
str+='<br><br>';
str+='</div>';
window.input.componentNum.value=i;
window.input.componentNum_hidden.value=j;
window.input.component_compose_ID.value=number_str_of_add;
window.chooseComponent.innerHTML=str;
}
//删除一个由ID指定的元件，再生新生成需要的字符串
function delComponent(id)
{
document.getElementById('component'+id+'_div').innerHTML='';
document.getElementById('component'+id+'_div').style.display='none';
if(!window.input.componentNum.value)
actualNum=1;
else
actualNum=eval(window.input.componentNum.value);
actualNum--;
window.input.componentNum.value=actualNum;
}
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>
<title>动态增加选择项</title>
</head>
<body>
<center>
<form name="input">
<textarea cols="0" rows="0" style="display:none" name=hiddenValue>
<option value=1>干掉小日本</option>
<option value=2>K掉小日本</option>
<option value=3>去死小日本</option>
<option value=4>王八小日本</option>
</textarea>
<table cellspacing="2" cellpadding="3" border="1">
<tr>
<th width="27%">
元件个数：
</th>
<th width="73%" align="left"> <input type=text name="componentNum" size="25">
<input type=hidden name="componentNum_hidden" size="25">
<input type=hidden name="component_compose_ID" size="25">
<input type=button onclick="setComponent()" value="。设定元件 。">
<input type=button onclick="addComponent()" value="。增加元件 。">
</th>
</tr>
<tr>
<th width="27%">
选择元件：
</th>
<th width="73%" id="chooseComponent" align="left">
<select name=component1>
<option value=1>干掉小日本</option>
<option value=2>K掉小日本</option>
<option value=3>去死小日本</option>
<option value=4>王八小日本</option>
</select>数量：<input type=text name=component1Num size=10>
<input type=button onclick=delComponent(1) value=删除元件>
</th>
</tr>
</table>
</form>
</center>
</body>
</html>
分享到：
相关推荐
在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`<table>`...
此外，还可以使用JavaScript实现其他高级特效，如图片轮播、计时器、表单验证等。图片轮播可以自动切换图片，并添加过渡效果，增加视觉冲击力；计时器则可以用于倒计时、实时更新等场景；而表单验证则可以在用户输入...
JavaScript动态增加文件域表单的实现原理与方法 在页面上动态添加文件上传控件，以便用户上传多个文件，是网站表单设计中的常见需求。传统的静态页面设计只允许用户上传一个文件，而动态增加文件域可以使用户根据...
### JavaScript 实现动态增加删除表格行（兼容 IE/FF） #### 概述 在 Web 开发中，动态地增加或删除表格行是一项常见的需求。这项技术可以极大地提高用户体验，使得用户能够根据自己的需要来调整表格内容。本文将...
Javascript实现登录记住用户名和密码功能的核心在于使用Web存储技术，这里主要用到了cookies技术来实现这一需求。在页面加载时，可以通过读取保存在本地的cookies来自动填充表单中的用户名和密码信息，从而达到记住...
在IT行业中，JavaScript库在构建Web应用程序时起着至关重要的作用，它们提供了各种功能，以帮助开发者更高效地实现复杂的任务。本篇文章将深入探讨一个名为"Magic Grid"的轻量级JavaScript库，该库专注于动态网格...
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户...无论使用哪种方法，理解和掌握动态增加删除行的原理对于任何前端开发者都是必要的。
本压缩包文件“javascript经典特效---列表的增加删除.rar”显然着重于讲解如何使用JavaScript实现这些功能。在HTML文档“列表的增加删除.htm”中，可能包含了具体的代码示例和解释。 首先，我们要理解JavaScript是...
在软件开发中，动态添加和删除菜单项是一项常见的需求，特别是在设计用户界面或者管理系统时。这一功能使得应用程序可以根据用户需求、权限或者特定条件灵活地调整菜单结构。在本篇文章中，我们将深入探讨如何实现这...
下面，我们将详细介绍如何使用JavaScript实现节点的删除与序号重建，并对相关内容进行详细的知识点阐释。 1. JavaScript节点删除技巧： 当我们需要从页面中删除一个DOM节点时，可以使用几种不同的方法。最直接的...
利用JavaScript结合CSS3，我们可以实现表单元素的各种动画效果，如渐显渐隐、滑动切换等，增加表单的视觉吸引力。例如，通过改变元素的`style`属性，实现平滑的过渡效果。 七、响应式表单 随着移动设备的普及，响应...
在本主题"js表格操作，DOM实现数据动态增删查改"中，我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**：首先，我们需要在HTML中创建一个基础的表格结构。这通常...
在网页开发中，省市地区联动是一项常见的功能，它允许用户在选择省份时，根据所选省份动态更新下拉框中的城市和地区选项。这种交互方式提高了用户体验，减少了不必要的网络请求。"省市地区联动的Javascript实现"就是...
"js 动态增加删除行hwh"这个主题主要涉及到JavaScript操作DOM（Document Object Model）节点的能力。DOM是网页内容的结构化表示，通过它可以方便地对页面元素进行增删改查。 首先，让我们深入了解如何使用...
以上就是关于“列表框动态增加删除”的基本知识。无论是在桌面应用还是Web应用中，掌握这些技能都能帮助开发者更好地创建具有用户友好的交互功能。通过实践和理解这些基本操作，你可以创建出更加灵活和适应用户需求...
在JavaScript实现购物车功能的过程中，会涉及到多个关键知识点，这些技术是前端开发中不可或缺的部分。以下将详细阐述这些知识点： 1. **购物车计算价格**：这是购物车的核心功能之一，需要对每件商品的价格与数量...
本文主要阐述了如何使用Vue.js和Element UI来实现表单的动态生成，并为这些动态生成的表单添加了验证功能。 知识点一：Vue.js框架基础 Vue.js是一个构建用户界面的渐进式JavaScript框架，核心库仅关注视图层，易于...
- 实现方法：使用JavaScript监听第一个下拉框的选择事件，并根据选择结果动态更新第二个下拉框的内容。 **9. 文本排序** - 描述：对文本内容进行排序。 - 实现方法：使用JavaScript的数组排序方法`sort()`。 ...
本篇文章将深入探讨如何使用JavaScript实现这样的功能。 首先，我们要理解动态分类信息操作的基础。一个动态分类系统通常包括以下组件： 1. **前端界面**：用户与系统交互的界面，通常由HTML、CSS和JavaScript构建...