javascript操作listbox示例

来源：互联网发布：杭州淘宝代运营hzmytp 编辑：程序博客网时间：2024/05/16 10:54

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> js操作listbox示例 </TITLE>
<META CONTENT="EditPlus">
<META CONTENT="">
<META CONTENT="">
<META CONTENT="">
</HEAD>

<BODY>
<script language='javascript'>
/**********************操作ListBox的相关函数***START*********************/

/*
* 把源列表sourcelist中的所有内容移到目标列表targetlist中去
*/
function moveAll(sourceList, targetList){
            var lst1=window.document.getElementById(sourceList);
    var lst2=window.document.getElementById(targetList);
            var length = lst1.options.length;
            for(var i=0;i<length;i++)
            {
                var v = lst1.options[i].value;
                var t = lst1.options[i].text;
                if(!hasValue(targetList,v)){
      //目录列表中没有当前值，则加入
      lst2.options[lst2.options.length] = new Option(t,v,true,true);
     }
            }
    //把源列表中的内容移除
    removeAll(sourceList);
        }

   /*
   * 将id为listId的列表中的内容全部移除
   */
        function removeAll(listId)
        {
            var lst=window.document.getElementById(listId);
            var length = lst.options.length;
            for(var i=length;i>0;i--)
            {
                lst.options[i-1].parentNode.removeChild(lst.options[i-1]);
            }
        }

   /*
   * 将sourceList中的选中项移动到targetList中去
   */
        function moveSelect(sourceList, targetList)
        {
            var lst1=window.document.getElementById(sourceList);
            var lst2=window.document.getElementById(targetList);
    var length = lst1.options.length;
    for(var i=0;i<length;i++){
     var lstindex=lst1.selectedIndex;
     if(lstindex<0)
      return;
     var v = lst1.options[lstindex].value;
     var t = lst1.options[lstindex].text;
     if(!hasValue(targetList,v)){
      lst2.options[lst2.options.length] = new Option(t,v,true,true);
     }
     removeSelect(sourceList);
    }

        }

   /*
   * 删除列表listId中的选中项(删除的为索引值最小的一项)
   */
        function removeSelect(listId)
        {
            var lst2=window.document.getElementById(listId);
            var lstindex=lst2.selectedIndex;
            if(lstindex>=0)
            {
                var v = lst2.options[lstindex].value+";";
                lst2.options[lstindex].parentNode.removeChild(lst2.options[lstindex]);
            }

        }

   /*
   * 判断id为listId列表中有没有给定的值v
   */
   function hasValue(listId,v){
    var lst = window.document.getElementById(listId);
    var length = lst.options.length;
    for(var i = 0; i < length; i++){
     var vv = lst.options[i].value;
     if(v == vv){
      return true;
     }
    }
    return false;
   }
      /**********************操作ListBox的相关函数***END*********************/
</script>
<h3>用javascript操作listbox示例</h3>
   <form action='#'>
    <table>
     <tr>
      <td>
       <select multiple='true' style='width:100px;height:120px'>
       <option value='ding0'>ding0</option>
       <option value='ding1'>ding1</option>
       <option value='ding2'>ding2</option>
       <option value='ding3'>ding3</option>
       <option value='ding4'>ding4</option>
       </select>
      </td>
      <td width='50' align='center'>
       <table>
       <tr><td><input type='button' value='>>' source","target");'/></td></tr>
       <tr><td><input type='button' value=' > ' source","target");'/></td></tr>
       <tr><td><input type='button' value=' < ' target","source");'/></td></tr>
       <tr><td><input type='button' value='<<' target","source");'/></td></tr>
       </table>
      </td>
      <td>
       <select multiple='true' style='width:100px;height:120px'>
       </select>
      </td>
     </tr>
    </table>
   </form>
</BODY>
</HTML>
示例效果如图：