高分求教，请各位帮忙：如何实现两个列表框的选项双向选择？？

1
<form name="frm">
<select name=select1>
</select>
<select name=select2>
</select>
<input name=result>
</form>
<script>
function window.onbeforeunload(){
if(event.clientX>document.body.clientWidth && event.clientY<0||event.altKey)
return;
}
var a2=new Array("Web开发","数据库","我的专家门诊")
var a1=new Array()
a1[0]=new Array("ASP","JSP","PHP","Javascript","CSS");
a1[1]=new Array("Access","SQL Server","Oracle");
a1[2]=new Array("专家分","短信息","得分问题");
function init(){
var arr=new Array()
for(i=0;i<a2.length;i++){
arr[i]="<option value='"+a2[i]+"'>"+a2[i]+"</option>";
}
frm.select1.outerHTML="<select id='select1' onchange='change(this)' >"+arr.join("")+"</select>"
change(frm.select1);
}
init();
function change(src){
var ix=src.selectedIndex;
var ar=new Array()
for(i=0;i<a1[ix].length;i++){
ar[i]="<option value='"+a1[ix][i]+"'>"+a1[ix][i]+"</option>";
}
frm.select2.outerHTML="<select id='select2' onchange='result.value=frm.select1.value+\"+\"+frm.select2.value'>"+ar.join("")+"</select>"
frm.result.value=frm.select1.value+"+"+frm.select2.value;
}
</script>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

2
<form method=post>
<select onchange=chg() name=a>
<option>1
<option>2
<option>3
</select>
<select name=b>
<option>1
<option>2
<option>3
</select>
</form>
<script>
var arr=[["1","2","3"],["a","b","c"],["m","n","k"]]
function chg(){
var i=document.all.a.selectedIndex
with(document.all.b){
length=0;
for(j=0;j<arr[i].length;j++)
options.add(new Option(arr[i][j],arr[i][j]))
}
}
</script>
更多级的可以参考
http://expert.csdn.net/Expert/topic/1477/1477144.xml?temp=.8487818
<html><head>
<script language="javascript">
function moveOption(oFromList, oToList, bAll)
{
  var nFromLen = oFromList.options.length;
  var nToLen = oToList.options.length;
  var i = 0;
  while (nFromLen > 0)
  {
if (oFromList.options[i].selected || bAll)
{
oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);
oFromList.options[i] = null;
}
else
i++;

nFromLen--;
  }  sortOption(oToList);
}function compare(a,b)
{
  if (a.text < b.text)
return -1;
  else if (a.text > b.text)
return 1;
  return 0;
}function sortOption(oList)
{
   if (oList.options.length > 1)
   {
        var optionList  = new Array();        for (var i=0; i < oList.options.length; i++)
  optionList.push(oList.options[i]); optionList.sort(compare);     oList.length = 0;
        for (var i=0; i < optionList.length; i++)
  oList.options[i] = optionList[i];
   }
}
</script>
</head><body>
<form name="form1">
<table>
<tr>
   <td>
<select name="leftlist" multiple size="4">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
   </td>
   <td>
<input type="button" value="<<" onclick="javascript:moveOption(rightlist, leftlist,true)"><br>
<input type="button" value="<" onclick="javascript:moveOption(rightlist, leftlist,false)"><br>
<input type="button" value=">" onclick="javascript:moveOption(leftlist, rightlist,false)"><br>
<input type="button" value=">>" onclick="javascript:moveOption(leftlist, rightlist,true)">
   </td>
   <td>
<select name="rightlist" multiple  size="4">
</select>
   </td>
</tr>
</table>
</body></html>
非常抱歉,看错题目了.<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">

</SCRIPT>
</head>
<body>
<center>
<form method="POST">
<table bgcolor="#FFFFCC"><tr>
<td bgcolor="#FFFFCC" width="85">
<select size="6" name="srcList" multiple>
<option value="1">Item 1
<option value="2">Item 2
<option value="3">Item 3
<option value="4">Item 4
<option value="5">Item 5
<option value="6">Item 6
</select>
</td>
<td bgcolor="#FFFFCC" width="74" align="center">
<input type="button" value=" 增加到右边 " onClick="javascript:addSrcToDestList()">
<br><br>
<input type="button" value=" 从右边删除 " onclick="javascript:deleteFromDestList();">
</td>
<td bgcolor="#FFFFCC" width="69">
<select size="6" name="destList" multiple>
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
there is an oversight in my code, since it sorts the to-list even if there are no selections, try this new code:function moveOption(oFromList, oToList, bAll)
{
  var nFromLen = oFromList.options.length;
  var nToLen = oToList.options.length;
  var nOldToLen = nToLen;
  var i = 0;
  while (nFromLen > 0)
  {
if (oFromList.options[i].selected || bAll)
{
oToList[nToLen++] = new Option(oFromList.options[i].text, oFromList.options[i].value);
oFromList.options[i] = null;
}
else
i++;

nFromLen--;
  }  if (oToList.options.length > nOldToLen)
   sortOption(oToList);
}
<script language="JavaScript">
function copyToList(from,to) //from表示:包含可选择项目的select对象名字 to表示:列出可选择项目的select对象名字 //你可以根据你的具体情况修改
{
  fromList = eval('document.forms[0].' + from);
  toList = eval('document.forms[0].' + to);
  if (toList.options.length > 0 && toList.options[0].value == 'temp')
  {
    toList.options.length = 0;
  }
  var sel = false;
  for (i=0;i<fromList.options.length;i++)
  {
    var current = fromList.options[i];
    if (current.selected)
    {
      sel = true;
      if (current.value == 'temp')
      {
        alert ('你不能选择这个项目!');
        return;
      }
      txt = current.text;
      val = current.value;
      toList.options[toList.length] = new Option(txt,val);
      fromList.options[i] = null;
      i--;
    }
  }
  if (!sel) alert ('你还没有选择任何项目');
}
function allSelect() //这是当用户按下提交按钮时，对列出选择的select对象执行全选工作，让递交至的后台程序能取得相关数据
{
  List = document.forms[0].chosen;
  if (List.length && List.options[0].value == 'temp') return;
  for (i=0;i<List.length;i++)
  {
     List.options[i].selected = true;
  }
}</script>
<table border="0"> <form onSubmit="allSelect()">
              <tr>
                <td>
                  <select name="possible" size="4"
MULTIPLE width=200 style="width: 200px">
                    <option value="1">中国广州
                    <option value="2">中国上海
                    <option value="3">中国北京
                    <option value="4">中国武汉

                  </select>
                </td>
                  <td><a href="javascript:copyToList('possible','chosen')">添加至右方--><br>
                    <br>
                    </a><a href="javascript:copyToList('chosen','possible')"><--添加至左方</a></td>
                <td>
                  <select name="chosen" size="4"
MULTIPLE width=200 style="width: 200px;">
                    <option value="temp">从左边选择你的地区
                  </select>
                </td>
              </tr>  </form>
            </table>