html对select标签实现数据动态增加，删除，修改功能。
2011-12-14 20:28
1041 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
function addtest()
{
alert("test");
var se = document.getElementById('sel');
var a = document.getElementById('text1');
se.options.add(new Option(a.value));
document.getElementById('text1').value = "";
document.getElementById('text1').focus();
}
function del()
{
alert("del");
var se = document.getElementById('sel');
se.options.remove(se.selectedIndex);
se.selectIndex=0;
}
function ccccc()
{
document.getElementById('addnew').style.display="none";
document.getElementById('changenew').style.display="block";
var se = document.getElementById('sel');
document.getElementById('oldinput').value = se.options[se.selectedIndex].text
}
function canceltest()
{
document.getElementById('addnew').style.display="block";
document.getElementById('changenew').style.display="none";
}
function changetest()
{
alert("change");
var newdate =document.getElementById('newinput').value;
var se = document.getElementById('sel');
se.options[se.selectedIndex].text = newdate;
document.getElementById('addnew').style.display="block";
document.getElementById('changenew').style.display="none";
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<div id="addnew" style="display:block">
<table width="200" border="1">
<tr>
<td><label>
<select name="select" id="sel" size="5" style="width:200px" multiple="multiple">
</select>
<input type="button" name="Submit2" value="cccccc" onclick="ccccc()" />
<input type="button" name="Submit3" value="del" onclick="del()" />
</label></td>
<td><label>
<input type="text" name="textfield" id ="text1"/>
</label></td>
<td><label>
<input type="button" name="Submit" value="add" onclick="addtest()"/>
</label></td>
</tr>
</table>
</div>
<div id="changenew" style="display:none">
<table width="272" height="44" border="1">
<tr>
<td><label>
<input type="text" name="textfield2" id="oldinput"/>
</label></td>
<td><label>
<input type="text" name="textfield3" id="newinput" />
</label></td>
<td><label>
<input type="button" name="Submit4" value="change" onclick="changetest()" />
</label>
<label>
<input type="button" name="Submit5" value="cancel" onclick="canceltest()"/>
</label></td>
</tr>
</table>
</div>
<p> </p>
<label></label>
</form>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<script>
function addtest()
{
alert("test");
var se = document.getElementById('sel');
var a = document.getElementById('text1');
se.options.add(new Option(a.value));
document.getElementById('text1').value = "";
document.getElementById('text1').focus();
}
function del()
{
alert("del");
var se = document.getElementById('sel');
se.options.remove(se.selectedIndex);
se.selectIndex=0;
}
function ccccc()
{
document.getElementById('addnew').style.display="none";
document.getElementById('changenew').style.display="block";
var se = document.getElementById('sel');
document.getElementById('oldinput').value = se.options[se.selectedIndex].text
}
function canceltest()
{
document.getElementById('addnew').style.display="block";
document.getElementById('changenew').style.display="none";
}
function changetest()
{
alert("change");
var newdate =document.getElementById('newinput').value;
var se = document.getElementById('sel');
se.options[se.selectedIndex].text = newdate;
document.getElementById('addnew').style.display="block";
document.getElementById('changenew').style.display="none";
}
</script>
<body>
<form id="form1" name="form1" method="post" action="">
<div id="addnew" style="display:block">
<table width="200" border="1">
<tr>
<td><label>
<select name="select" id="sel" size="5" style="width:200px" multiple="multiple">
</select>
<input type="button" name="Submit2" value="cccccc" onclick="ccccc()" />
<input type="button" name="Submit3" value="del" onclick="del()" />
</label></td>
<td><label>
<input type="text" name="textfield" id ="text1"/>
</label></td>
<td><label>
<input type="button" name="Submit" value="add" onclick="addtest()"/>
</label></td>
</tr>
</table>
</div>
<div id="changenew" style="display:none">
<table width="272" height="44" border="1">
<tr>
<td><label>
<input type="text" name="textfield2" id="oldinput"/>
</label></td>
<td><label>
<input type="text" name="textfield3" id="newinput" />
</label></td>
<td><label>
<input type="button" name="Submit4" value="change" onclick="changetest()" />
</label>
<label>
<input type="button" name="Submit5" value="cancel" onclick="canceltest()"/>
</label></td>
</tr>
</table>
</div>
<p> </p>
<label></label>
</form>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 利用Jquery+HTML静态模版实现数据的展示及无刷新增加,修改,删除,分页操作!
- 项目经验之:利用Jquery+HTML静态模版实现数据的展示及无刷新增加,修改,删除,分页操作!!!
- GridView动态绑定数据、编辑、修改、删除及分页功能
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 用c语言实现 一个通讯录（实现 增加、删除、查找、修改、显示、清空功能）
- JavaScript数组，JSON对象实现动态添加、修改、删除功能示例
- HTML 中动态增加、删除行的实现
- Asp.net+Extjs实现对GridPanel分页、行内编辑、增加、删除、弹出新窗体增加、数据验证、编辑指定列、数据格式转换等功能
- JS实现动态表格的添加，修改，删除功能(推荐)
- 使用javascript操作多选列表框，实现动态增加删除，左右移动，上下排序移动等功能。
- QT中如何实现XML文件的创建、增加、修改、删除功能。
- java使用dbcp连接池实现jdbc动态新增，修改，删除，切换数据库源
- html之表格数据增加删除修改
- 常用的js动态增加（删除）table数据行的功能
- jquery 动态移除/增加onclick 增加,移除,修改一个html标签的class名字
- 用html、jquery、php编写新闻后台管理页面，动态添加新闻数据并实现数据的增删改查功能
- Android；sql数据库：关于删除数据库数据无法刷新listview并且新listview的修改增加功能出现bug的问题
- QT中如何实现XML文件的创建、增加、修改、删除功能。
- js动态增加（删除）table数据行的功能
- 基于HTML+CSS+JS实现增加删除修改tab导航特效代码