http://blog.csdn.net/wld1985/article/details/7071721
<!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>