關于頁面兩個列表的數據傳輸的js算法

頁面設計如下：
        <td>
            <select id="availableRoles" size="10" multiple="multiple" style="width: 150px;">
             <option></option>
            </select>
       </td>
       <td align="center">
            <a href="javascript:secure.addRole()" class="button" style="width: 60px;">Add &gt;</a>
            <br/>
            <a href="javascript:secure.removeRole()" class="button" style="width: 60px;">&lt; Remove</a>
       </td>
       <td>
            <select id="roles" size="10" multiple="multiple" style="width: 150px;">
             <option></option>
            </select>
       </td>

對應的js如下（這里的js是使用的prototype的js方法）

Security = Class.create();

Security.prototype =
{

addRole: function()
 {
  var availableRolesList = $("availableRoles");
  var rolesList = $("roles");
  this.moveOption(availableRolesList, rolesList);
 },
 
 removeRole: function()
 {
  var availableRolesList = $("availableRoles");
  var rolesList = $("roles");
  this.moveOption(rolesList, availableRolesList);
 },
 
 moveOption: function(source, target)
 {
  var lastInsert = null;
  for (var i = source.options.length - 1; i >= 0; i--)
  {
   if (source.options[i].selected)
   {
    var option = source.removeChild(source.options[i]);
    target.insertBefore(option, lastInsert);
    lastInsert = option;
   }
  }
 },
}

var secure = null;

function initSecurity()
{
 secure = new Security();
 secure.setup();
}

Event.observe(window, "load", initSecurity, false);

posted on 2007-11-13 20:03 劉錚 閱讀(514) 評論(0)  編輯  收藏 所屬分類: JavaScript