用 Javascript 實現的“Dual listbox”(雙向選取器)

最後更新：2017-02-28 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

javascript

這是我用 Javascript 製作的“Dual listbox”(雙向選取器)的一個應用樣本，是從My Code中摳出來的。在網頁編程中經常會用到。

也許我的實現太煩瑣了，希望大家有更好的代碼貢獻出來。

<html>
<head>
<title>選取器</title>
<link href="./style/style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="Page-Enter" content="blendTrans(Duration=1.0)">
<meta http-equiv="Page-Exit" content="blendTrans(Duration=1.0)">
<script language="javascript">
function openwin(url, l, t, w ,h)
{open(url,'','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=no,width='+ w +',height='+ h +',left='+ l +',top='+ t);}

    function check_and_submit(frm)
    {
      SelectAll(frm.SelectedItem);
      frm.submit();
    }
</script>
</head>

<body>

<table width="500" border="0" cellspacing="0" cellpadding="0" align="center">
<tr height=10><td colspan=3></td></tr>
<tr>
    <td width="220" align=center valign="top">
      已指派該使用者管理的欄目：<br><br>
      <select name="SelectedItem" id="SelectedItem" size=12 multiple="true">
        <option>無</option>

      </select>
      </select>
    </td>
    <td width="60" align=center>
      <br><br>
      <button ><</button><br><br>
      <button ><<</button><br><br><br><br>
      <button >></button><br><br>
      <button >>></button><br>
    </td>
    <td width="220" align=center valign="top">
      待分配的欄目：<br><br>
      <select name="WaitSelectItem" size=12 multiple=true>
        <option>師大要聞</option>
        <option>視頻新聞</option>
        <option>圖片新聞</option>
        <option>專題要聞</option>
        <option>十萬個為什麼</option>
        <option>代碼測試</option>
        <option>www.why100000.com</option>
      </select>
    </td>
</tr>
</table>
</form>

if (sel_source.options[0].text=="無") //源：只有“無”項目
return;

if (sel_dest.options[0].text=="無") //目標：只有“無”項目，則先刪除該提示性項目
sel_dest.options.remove(0);

   var SelectedText = sel_source.options[sel_source.selectedIndex].text;
   sel_dest.options.add(new Option(SelectedText));
   sel_source.options.remove(sel_source.selectedIndex);

if (sel_source.options.length==0) //源：如果刪除完所有有用項目，則添加提示項目：“無”
sel_source.options.add(new Option("無"));
}

function MoveAllItems(sel_source, sel_dest)
{
if (sel_source.options[0].text=="無") //源：只有“無”項目
return;

if (sel_dest.options[0].text=="無") //目標：只有“無”項目，則先刪除該提示性項目
sel_dest.options.remove(0);

   //首先拷貝所有項目到目標：
   var sel_source_len = sel_source.length;
   for (var j=0; j<sel_source_len; j++)
   {
     var SelectedText = sel_source.options[j].text;
     sel_dest.options.add(new Option(SelectedText));
   }

   //然後刪除“源”所有項目：
   while ((k=sel_source.length-1)>=0)
   {
     if (sel_source.options[0].text=="無") //源：只有“無”項目
       break;
     sel_source.options.remove(k);
     if (sel_source.options.length==0) //源：如果刪除完所有有用項目，則添加提示項目：“無”
       sel_source.options.add(new Option("無"));
   }
}

function SelectAll(theSel) //選中select中全部項目
{ for (i = 0 ;i<theSel.length;i++)
theSel.options[i].selected = true;
}
</script>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More