如何利用js实现两个select之间的数据传递

本帖最后由 pard521 于 2012-10-17 13:13:52 编辑

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <script type="text/javascript">
    function init(){
    var a=document.getElementById("TypeLevel1");
    var os=a.getElementsByTagName("option");
    for(var i=0;i<os.length;i++){
    os[i].ondblclick=change;
    }
    }
    function change(){
    var a=document.getElementById("TypeLeve2");
    a.appendChild(this);
    }
    window.onload=init;
    </script>
    </head><body>
    <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
                            </select>
                        </td>
                        <td style="height: 100px" width="20">
                            <div style="height:100%;padding-top:80px;">
                                &nbsp;<b>→</b></div>
                        </td>
                        <td>
                            <select id="TypeLeve2" name="TypeLevel2"" 
                                size="13" style="WIDTH: 100px">
                                <option value="">不选</option>
                            </select>
                        </td>
                    </tr>
                </table>
    </body>
    </html>
    双击实现
      

  2.   

      <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                            </select>
                        </td>
                        <td style="height: 100px" width="20">
                            <div style="height:100%;padding-top:80px;">
                                &nbsp;<b style="cursor:pointer;" onclick="move(true)">→</b><br /><br />
                                <b style="cursor:pointer;" onclick="move()">←</b></div>
                        </td>
                        <td>
                            <select id="TypeLevel2" name="TypeLevel2"
                                size="13" style="WIDTH: 100px">
                                <option value="">不选</option>
                            </select>
                        </td>
                    </tr>
                </table>
                <script type="text/javascript">
                    function move(toRight) {
                        var s1 = document.getElementById('TypeLevel1'), s2 = document.getElementById('TypeLevel2');
                        if (toRight) {
                            if (s1.selectedIndex == -1) { alert('请选择要移动的Option！'); return; }
                            s2.appendChild(s1.options[s1.selectedIndex]);
                        }
                        else {
                            if (s2.selectedIndex == -1) { alert('请选择要移动的Option！'); return; }
                            s1.appendChild(s2.options[s2.selectedIndex]);
                        }
                    }
                </script>
      

  3.   


    <html>
    <head>
    <script type="text/javascript" src="jquery-1.8.0.js">

    </script>

    </head>
    <body>
    <table border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td>
                            <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px">
    <option selected="selected">请选择</option>
    <option >apple</option>
    <option>banana</option>
                            </select>
                        </td>
                        <td style="height: 100px;border:solid 1px black" width="20">
                            <div style="height:100%;padding-top:80px;">
                                &nbsp;<b>→</b></div>
                        </td>
                        <td>
                            <select id="TypeLeve2" name="TypeLevel2"" 
                                size="13" style="WIDTH: 100px">
                            </select>
                        </td>
                    </tr>
            </table>
    <script type="text/javascript">
    $(function(){
    $("table tr td:nth-child(2)").click(function(){
    var option = $("#TypeLevel1>option:selected");
    var optionText=option.text();
    if(optionText!="请选择")
    {
    var options=$("#TypeLeve2 option");
    if(options.size()<=0)
    {
    var insertStr = "<option>"+optionText+"</option>";
    $(insertStr).appendTo($("#TypeLeve2"));
    }
    else
    {
    var canInsert=true;
    $("#TypeLeve2 option").each(function(i,n){
     if($(n).text()==optionText)
     {
    canInsert=false;
    return;
     }
    });
    if(canInsert)
    {
    var insertStr = "<option>"+optionText+"</option>";
    $(insertStr).appendTo($("#TypeLeve2"));
    }
    }
    }
    });
    });
    </script>
    </body>
    </html>
      

  4.   

    来一个支持多选的移动。鼠标按住不放拖动可以选择多个目标同时移动。
    想要从右往左移动只需添加leftToRight('TypeLevel2', 'TypeLeve1');即可。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
    <head>
    <title>Untitled</title>
    </head><body>
     <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
             <select id="TypeLevel1" name="TypeLevel1" size="13" style="WIDTH: 100px" multiple="multiple">
             <option value="java">Java</option>
             <option value="php">PHP</option>
             <option value="c">C</option>
             <option value="c++">C++</option>
             <option value=".net">.NET</option>
             </select>
            </td><td style="height: 100px" width="20">
                <div style="height:100%;padding-top:80px;">&nbsp;<b id="leftToRight">→</b></div>
            </td><td>
                <select id="TypeLeve2" name="TypeLevel2" size="13" style="WIDTH: 100px" multiple="multiple">
                    <option value="">不选</option>
                </select>
            </td>
        </tr>
    </table><script type="text/javascript">
    var $ = function(n, pn) {return (pn||document).getElementById(n);}
    $('leftToRight').onclick = function() {
    leftToRight('TypeLevel1', 'TypeLeve2');
    } function leftToRight(from, to) {
    this._from = $(from);
    this._to = $(to);
    var selectedIdx = this._from.selectedIndex;
    while (selectedIdx > -1) {
    var opt = this._from.options[selectedIdx];
    var newopt = document.createElement('option');
    newopt.value = opt.value;
    newopt.text = opt.text;
    this._to.add(newopt);
    this._from.remove(selectedIdx);
    selectedIdx = this._from.selectedIndex;
    }
    }
    </script>
    </body>
    </html>