想实现一个类似IE的自定义工具栏的网页界面

Question

<table border=0 cellpadding=0 cellspacing=0><form name=meizz>
  <tr><td>
    <select id=list1 size=8 ondblclick="moveOption(this, this.form.list2)">
      <option value=A>aaaaaaaaaa
      <option value=B>bbbbbbbbbb
      <option value=C>cccccccccc
      <option value=D>dddddddddd
      <option value=E>eeeeeeeeee
      <option value=F>ffffffffff
      <option value=G>gggggggggg
      <option value=H>hhhhhhhhhh
    </select></td>
  <td width=40 align=center>
    <input name=add type=button value=">>>" onclick="moveOption(this.form.list1, this.form.list2)"><br><br>
    <input name=sub type=button value="<<<" onclick="moveOption(this.form.list2, this.form.list1)">
  </td><td>
    <select id=list2 size=8 ondblclick="moveOption(this, this.form.list1)">
    </select>
  </td></tr></form>
</table><script language="JavaScript"><!--
function moveOption(e1, e2){
    try{
        var e = e1.options[e1.selectedIndex];
        e2.options.add(new Option(e.text, e.value));
        e1.options.remove(e1.selectedIndex);
    }   catch(e){}
}
//--></script>
论坛上其他人写的。

Answer 1

<script>
    function moveOver(a,b) {
        var LeftID = a;
        var RightID = b;
var delIndex;
        var max = LeftID.options.length;
        for (var i=0;i<max;i++) {
            if (LeftID.options[i].selected) {
               for (var j=0;j<RightID.options.length;j++) {
                    if (RightID.options[j].text == LeftID.options[i].text) {
                        alert("您不能重复加入");
                        return;
                    }
                }
                RightID.options.add(new Option(LeftID.options[i].text,LeftID.options[i].value));
delIndex=i;

            }
        }
LeftID.options.remove(delIndex);  
    }
</script>
  <select name="sel_1" size="5" id="sel_1">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
  </select>
<input type="button" value=">>" onClick="moveOver(document.getElementById('sel_1'),document.getElementById('sel_2'))">
<input type="button" value="<<" onClick="moveOver(document.getElementById('sel_2'),document.getElementById('sel_1'))">
  <select name="sel_2" size="5" id="sel_2">
  </select>

Answer 2

有小bug，改一下：
var delIndex; ==>var delIndex="";LeftID.options.remove(delIndex); ==> if (delIndex!="") LeftID.options.remove(delIndex);