博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Javascript: 两个列表框之间移动数据

Posted on 2007-03-26 00:41  Snapping  阅读(737)  评论(2)  编辑  收藏  举报
JsSelect.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD> 
 <script language= "javascript">

    function $(id)
    {
        return document.getElementById(id);
    }

    function Test()
    {
        var result = window.showModalDialog('Options.html',null,'dialogWidth=500px;dialogHeight=400px;status=no');
        if(result)
        {
            var texts = '';
            var values = '';
            
            for(var i = 0; i<result.length; i++)
            {
                texts += result[i].text + ", ";
                values += result[i].value + ", ";
            }
            
            if(texts.length >0)
            {
                texts = texts.substr(0,texts.length-2);
            }

            if(values.length >0)
            {
                values = values.substr(0,values.length-2);
            }

            var objText = $('txtTexts')
            if(objText) {objText.value = texts; }
            var objValue = $('txtValues')
            if(objValue){objValue.value = values;}
            
        }
    }
 </script>
<style type="text/css">
    SelectResult{font-size: 9pt; color: #FFFFFF}
</style>
 <BODY>
 <input type="textbox" id="txtTexts" />
 &nbsp;
 <input type="Button" id="btnSelect" value="" onclick="Test()"/>

  <input type="textbox" id="txtValues" />
  
 </BODY>
</HTML>

Options.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 
<script language="Javascript">
    function $(id)
    {
        return document.getElementById(id);
    }

    function selectSingle()
    {
        var objFrom = $('selectFrom');
        if(objFrom.selectedIndex > -1)
        {
            var objTo = $('selectTo');
            var opt = objFrom.options[objFrom.selectedIndex];
            if(!hasSelectedOption(opt))
            {
                objTo.options[objTo.options.length] = new Option(opt.text, opt.value);
            }
        }
    }

    function selectAll()
    {
        var objFrom = $('selectFrom');
        var objTo = $('selectTo');

        for(var i = 0; i<objFrom.options.length; i++)
        {
            var opt = objFrom.options[i];
            if(!hasSelectedOption(opt))
            {
                objTo.options[objTo.options.length] = new Option(opt.text, opt.value);
            }
        }
    }

    function hasSelectedOption(opt)
    {
        var isExist = false;
        var objTo = $('selectTo');
        for(var j = 0; j<objTo.options.length; j++)
        {
            if(opt.value == objTo.options[j].value)
            {
                isExist = true;
                break;
            }
        }
        return isExist;
    }

    function deselectSingle()
    {
        var objTo = $('selectTo');
        if(objTo.selectedIndex > -1)
        {
            objTo.options[objTo.selectedIndex] = null;
        }
    }

    function deselectAll()
    {
        var objTo = $('selectTo');
        objTo.options.length = 0;    
    }


    function getSelectedOptions()
    {
        var objTo = $('selectTo');
        var arr = new Array();
        for(var i= 0; i<objTo.options.length; i++)
        {
            //arr[i] = [objTo.options[i].text, objTo.options[i].value];
            arr[i] = {
                'text':objTo.options[i].text,
                'value': objTo.options[i].value
            };
        }
        window.returnValue = arr;
        window.close();
    }
</script>
<style type="text/css">
   .btn{
   color:#050;
   font-family:'trebuchet ms',helvetica,sans-serif;
   font-size:small;
   font-weight:bold;
   width: 25px;
   }
</style>
</HEAD>
 <BODY>
    <table>
        <tr>
            <td width="45%">
                <select multiple id="selectFrom" style="width:200px;height:300px">
                    <option value="0">Snapping</option>
                    <option value="1">Neil</option>
                    <option value="2">Danny</option>
                    <option value="3">Bollra</option>
                    <option value="4">Johnson</option>
                </select>
            </td>
            <td width="10%" align="center">
                <input type="button" id="btnSelectSingle" value=">"  class="btn" onclick="selectSingle()"/><br>
                <input type="button" id="btnSelectAll" value=">>" class="btn" onclick="selectAll()"/><br>
                <input type="button" id="btnDeselectSingle" value="<" class="btn" onclick="deselectSingle()"/><br>
                <input type="button" id="btnUnselectAll" value="<<" class="btn" onclick="deselectAll()"/>
            </td>
            <td width="45%">
                <select multiple id="selectTo" style="width:200px; height:300px">
                    
                </select>
            </td>
            
        </tr>    
        <tr>
            <td colspan="3" align="right">
                <input type="button" id="btnOK" value="OK" onclick="getSelectedOptions()"/>
                <input type="button" id="btnCancel" value="Cancel" onclick="javascript: window.close();"/>
            </td>
        </tr>
    </table>
    
 </BODY>
</HTML>