用JS实现两个select里的option值的传递 增加、删除

现在有两个select多选框，把左边select的option添加到右边的select里，左边的select里的所有选项不能改变，从左边添加到右边的时候实现单个添加和批量添加。然后右边的select实现单个删除和全部删除的功能。
<BODY>
<table width="790" border="0" cellpadding="0" cellspacing="0">
  <tr valign="middle">
    <td height="15" colspan="7" align="left" valign="middle"><hr size="1" noshade></td>
  </tr>
  <tr align="center" valign="middle">
    <td height="20" colspan="2" align="right">&nbsp;</td>
    <td width="150" valign="middle">左select</td>
    <td width="85">&nbsp;</td>
    <td>右select</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr align="center" valign="middle">
    <td height="198" colspan="2" align="right"></td>
    <td align="center" valign="middle"><select name="source" id="source" size="16" multiple>
        <option>aaaaaaaa</option>
        <option>bbbbbbbb</option>
        <option>cccccccc</option>
        <option>dddddddd</option>
        <option>eeeeeeee</option>
        <option>ffffffff</option>
        <option>gggggggg</option>
        <option>hhhhhhhh</option>
      </select>
    </td>
    <td valign="middle"><p class="button1">
        <input name="search23" type="button" class="input0" id="search232" value="添加多个" onclick="add(2)">
        <br/>
        <input name="search2" type="button" class="input0" id="search25" value="添加单个" onclick="add(1)">       
        <br/>
        <input name="search222" type="button" class="input0" id="search2223" value="删除单个" onclick="remove(1)">
        <br/>
        <input name="search22" type="button" class="input0" id="search224" value="全部删除" onclick="remove(2)">
      </p>
      </td>
    <td align="center" valign="middle"><select name="dest" id="dest" size="16" multiple>
      </select>
    </td>
  </tr>
</table>
</BODY>
<script language="javascript">
<!--
var s = document.getElementById("source");
var d = document.getElementById("dest");
function add(type){
for(i=0;i<s.options.length;i++)
{
if( s.options[i].selected == true )
{
d.options.add( new Option( s[i].text,s[i].value ) );
if( type == 1 ) break;
}
}
}
function remove(type){
if( type==2 )
{
d.options.length=0;
return;
}
for(i=0;i<d.options.length;i++)
{
if( d.options[i].selected == true )
{
d.options.remove(i);
return;
}
}
}
//-->
</script>

posted on 2007-09-10 15:43  JEEF WANG  阅读(1504)  评论(2)  编辑  收藏  举报

导航