js兑现左右选择框
日期：2014-05-16 浏览次数：20252 次
<html>
<head>
<title>左右选择添加、删除菜单内容</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
选定一项或多项然后点击添加或移除(按住shift或ctrl可以多选)，或在选择项上双击进行添加和移除。<br>
<form method="post" name="myform">
? <table border="0" width="300">
??? <tr>
????? <td width="40%">
? <select style="width:100%;" multiple name="list1" size="12" ondblclick="moveOption(document.myform.list1, document.myform.list2)">
?? <option value="北京">北京</option>
?? <option value="上海">上海</option>
??
? </select>
?? </td>
????? <td width="20%" align="center">
? <input type="button" value="添加" onclick="moveOption(document.myform.list1, document.myform.list2)"><br><br>
? <input type="button" value="删除" onclick="moveOption(document.myform.list2, document.myform.list1)">
?? </td>
????? <td width="40%">
? <select style="width:100%;" multiple name="list2" size="12" ondblclick="moveOption(document.myform.list2, document.myform.list1)">
? </select>
?? </td>
??? </tr>
? </table>
</form>
?
<script language="JavaScript">
<!--
function moveOption(e1, e2){
?try{
? for(var i=0;i<e1.options.length;i++){
?? if(e1.options[i].selected){
??? var e = e1.options[i];
??? e2.options.add(new Option(e.text, e.value));
??? e1.remove(i);
??? i=i-1
?? }
? }
? document.myform.city.value=getvalue(document.myform.list2);
?}
?catch(e){}
}
function getvalue(geto){
?var allvalue = "";
?for(var i=0;i<geto.options.length;i++){
? allvalue +=geto.options[i].value + ",";
?}
?return allvalue;
}
//-->
</script>
?
</body>
</html>
