想做个从一侧input框选东西到另一个input框的功能，能向上向下调，有谁做过吗？

这个招聘类的网站上都有，，可以去看看应该是用multiple的select实现，不是input

解决方案 »

  1.   

    到JS板块去问去，这个功能不难。但是没有代码给你，选了点移动的时候把左边的去掉，右边加一个就可以了嘛，然后右边上下移动，就换一下Text和value就可以了。网上这个代码也许不好找，但是这个是思路。与无限分类没有关系！
      

  2.   

    用Jquery AJAX
    在input的onclick事件响应AJAX页面请求.返回另一个input 显示在页面的某个DIV中 (这样可作到无刷新显示)
    $.ajax({ url: "test.php",
                  type:"POST",           
                 dataType:"html",
                 data: "value1=1&value2=2",
                 success:function(msg){ 
                  document.getElementById(div).innerHTML=(msg);
                    
                } 
             });
      

  3.   

    就是这个图片~~
    http://zzjnet.blog.51cto.com/album/323001/123605046578.jpg
      

  4.   

    呵~~  最好不用ajax~~  不太懂~~
      

  5.   

    这个不关ajax事吧~纯纯的 javascript 
    网上一搜一大堆
      

  6.   

    搜什么呢??  这两个框互相传应该叫什么?还是,那个上下的关系,还是要返回到数据库里吧,纯javascript吗?
      

  7.   

    两个下拉框,左右移动,纯javascript操作.
    这个代码,网上一堆.
    或者你在哪个网站上看的,就分析一下哪个网站的javascript就会了.
      

  8.   

    与服务器交互才可能用到ajax
    你这纯粹是客户端操作
      

  9.   

    http://www.google.cn/search?hl=zh-CN&newwindow=1&q=%E4%B8%A4%E4%B8%AAselect%E4%BA%92%E6%8D%A2&btnG=Google+%E6%90%9C%E7%B4%A2&meta=lr%3Dlang_zh-CN&aq=f&oq=
    ig.<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>两个选择框上的内容可以左右互换--http://it.china-b.com/itwy/732574.html</title>
    </head><body>
    <script language="javascript">
    <!--
    sortitems = 1;  // Automatically sort items within lists? (1 or 0)function move(fbox,tbox) {
    for(var i=0; i<fbox.options.length; i++) {
    if(fbox.options[i].selected && fbox.options[i].value != "") {
    var no = new Option();
    no.value = fbox.options[i].value;
    no.text = fbox.options[i].text;
    tbox.options[tbox.options.length] = no;
    fbox.options[i].value = "";
    fbox.options[i].text = "";
    }
    }
    BumpUp(fbox);
    if (sortitems) SortD(tbox);
    }function BumpUp(box)  {
    for(var i=0; i<box.options.length; i++) {
    if(box.options[i].value == "")  {
    for(var j=i; j<box.options.length-1; j++)  {
    box.options[j].value = box.options[j+1].value;
    box.options[j].text = box.options[j+1].text;
    }
    var ln = i;
    break;
       }
    }
    if(ln < box.options.length)  {
    box.options.length -= 1;
    BumpUp(box);
       }
    }function SortD(box)  {
    var temp_opts = new Array();
    var temp = new Object();
    for(var i=0; i<box.options.length; i++)  {
    temp_opts[i] = box.options[i];
    }
    for(var x=0; x<temp_opts.length-1; x++)  {
    for(var y=(x+1); y<temp_opts.length; y++)  {
    if(temp_opts[x].text > temp_opts[y].text)  {
    temp = temp_opts[x].text;
    temp_opts[x].text = temp_opts[y].text;
    temp_opts[y].text = temp;
    temp = temp_opts[x].value;
    temp_opts[x].value = temp_opts[y].value;
    temp_opts[y].value = temp;
          }
       }
    }
    for(var i=0; i<box.options.length; i++)  {
    box.options[i].value = temp_opts[i].value;
    box.options[i].text = temp_opts[i].text;
       }
    }
    // End -->
    </script><form ACTION="" METHOD="POST">
    <table border="0">
    <tr>
    <td><select multiple size="5" name="list1">
    <option value="11"> item 1.1 </option>
    <option value="12"> item 1.2 </option>
    <option value="13"> item 1.3 </option>
    </select></td>
    <td>
    <input type="button" value="   >>   " onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
    <input type="button" value="   <<   " onclick="move(this.form.list2,this.form.list1)" name="B2">
    </td>
    <td><select multiple size="5" name="list2">
    <option value="21"> item 2.1 </option>
    <option value="22"> item 2.2 </option>
    <option value="23"> item 2.3 </option>
    </select></td>
    </tr>
    </table>
    </form></body></html>
      

  10.   


    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>两个选择框上的内容可以左右互换-选项上下移动</title>
    </head><body>
    <script language="javascript">
    <!--
    sortitems = 1;  // Automatically sort items within lists? (1 or 0)function move(fbox,tbox) {
        for(var i=0; i<fbox.options.length; i++) {
            if(fbox.options[i].selected && fbox.options[i].value != "") {
                var no = new Option();
                no.value = fbox.options[i].value;
                no.text = fbox.options[i].text;
                tbox.options[tbox.options.length] = no;
                fbox.options[i].value = "";
                fbox.options[i].text = "";
            }
        }
        BumpUp(fbox);
        if (sortitems) SortD(tbox);
    }function BumpUp(box)  {
    for(var i=0; i<box.options.length; i++) {
    if(box.options[i].value == "")  {
    for(var j=i; j<box.options.length-1; j++)  {
    box.options[j].value = box.options[j+1].value;
    box.options[j].text = box.options[j+1].text;
    }
    var ln = i;
    break;
       }
    }
    if(ln < box.options.length)  {
    box.options.length -= 1;
    BumpUp(box);
       }
    }function SortD(box)  {
    var temp_opts = new Array();
    var temp = new Object();
    for(var i=0; i<box.options.length; i++)  {
    temp_opts[i] = box.options[i];
    }
    for(var x=0; x<temp_opts.length-1; x++)  {
    for(var y=(x+1); y<temp_opts.length; y++)  {
    if(temp_opts[x].text > temp_opts[y].text)  {
    temp = temp_opts[x].text;
    temp_opts[x].text = temp_opts[y].text;
    temp_opts[y].text = temp;
    temp = temp_opts[x].value;
    temp_opts[x].value = temp_opts[y].value;
    temp_opts[y].value = temp;
          }
       }
    }
    for(var i=0; i<box.options.length; i++)  {
    box.options[i].value = temp_opts[i].value;
    box.options[i].text = temp_opts[i].text;
       }
    }function moveUp(s){
    var k=s.options.selectedIndex
    if(k>0){
            var Value = s.options[k-1].value;
            var Text = s.options[k-1].text;
            s.options[k-1].value=s.options[k].value;
            s.options[k-1].text=s.options[k].text;
            s.options[k].value=Value;
            s.options[k].text=Text;
            s.options[k-1].selected=1
        }
    }
    function moveDown(s){
    var k=s.options.selectedIndex;
    if(k<s.options.length-1){
            var Value = s.options[k+1].value;
            var Text = s.options[k+1].text;
            s.options[k+1].value=s.options[k].value;
            s.options[k+1].text=s.options[k].text;
            s.options[k].value=Value;
            s.options[k].text=Text;
            s.options[k].selected=0
            s.options[k+1].selected=1
        }
    }// End -->
    </script><form ACTION="" METHOD="POST">
    <table border="0">
    <tr>
    <td>
    <input type="button" value="▲" onclick="moveUp(this.form.list1)" name="B1"><br>
    <input type="button" value="▼" onclick="moveDown(this.form.list1)" name="B2"></td>
    <td>
    <select multiple size="5" name="list1">
    <option value="11"> item 1.1 </option>
    <option value="12"> item 1.2 </option>
    <option value="13"> item 1.3 </option>
    </select></td>
    <td>
    <input type="button" value=">>" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
    <input type="button" value="<<" onclick="move(this.form.list2,this.form.list1)" name="B2"></td>
    <td>
    <select multiple size="5" name="list2">
    <option value="21"> item 2.1 </option>
    <option value="22"> item 2.2 </option>
    <option value="23"> item 2.3 </option>
    </select></td>
    <td>
    <input type="button" value="▲" onclick="moveUp(this.form.list2)" name="B1"><br>
    <input type="button" value="▼" onclick="moveDown(this.form.list2)" name="B2"></td>
    </tr>
    </table>
    </form>
    <script language="javascript">
    <!--
    //-->
    </script>
    </body></html>
      

  11.   

    哈哈,楼上的老大~~  多谢多谢~~我发现还有个小bug~~  就是点上下的时候,  会变成全选的样式????  怎么会这样呢?  还能改吗?多谢您哈~~
      

  12.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>两个选择框上的内容可以左右互换-选项上下移动</title>
    </head><body>
    <script language="javascript">
    <!--
    sortitems = 1;  // Automatically sort items within lists? (1 or 0)function move(fbox,tbox) {
        for(var i=0; i<fbox.options.length; i++) {
            if(fbox.options[i].selected && fbox.options[i].value != "") {
                var no = new Option();
                no.value = fbox.options[i].value;
                no.text = fbox.options[i].text;
                tbox.options[tbox.options.length] = no;
                fbox.options[i].value = "";
                fbox.options[i].text = "";
            }
        }
        BumpUp(fbox);
        if (sortitems) SortD(tbox);
    }function BumpUp(box)  {
    for(var i=0; i<box.options.length; i++) {
    if(box.options[i].value == "")  {
    for(var j=i; j<box.options.length-1; j++)  {
    box.options[j].value = box.options[j+1].value;
    box.options[j].text = box.options[j+1].text;
    }
    var ln = i;
    break;
       }
    }
    if(ln < box.options.length)  {
    box.options.length -= 1;
    BumpUp(box);
       }
    }function SortD(box)  {
    var temp_opts = new Array();
    var temp = new Object();
    for(var i=0; i<box.options.length; i++)  {
    temp_opts[i] = box.options[i];
    }
    for(var x=0; x<temp_opts.length-1; x++)  {
    for(var y=(x+1); y<temp_opts.length; y++)  {
    if(temp_opts[x].text > temp_opts[y].text)  {
    temp = temp_opts[x].text;
    temp_opts[x].text = temp_opts[y].text;
    temp_opts[y].text = temp;
    temp = temp_opts[x].value;
    temp_opts[x].value = temp_opts[y].value;
    temp_opts[y].value = temp;
          }
       }
    }
    for(var i=0; i<box.options.length; i++)  {
    box.options[i].value = temp_opts[i].value;
    box.options[i].text = temp_opts[i].text;
       }
    }function moveUp(s){
        var k=s.options.selectedIndex;
        if(k>0){
            var Value = s.options[k-1].value;
            var Text = s.options[k-1].text;
            s.options[k-1].value=s.options[k].value;
            s.options[k-1].text=s.options[k].text;
            s.options[k].value=Value;
            s.options[k].text=Text;
            s.options[k].selected=0;
            s.options[k-1].selected=1
        }
    }
    function moveDown(s){
        var k=s.options.selectedIndex;
        if(k<s.options.length-1){
            var Value = s.options[k+1].value;
            var Text = s.options[k+1].text;
            s.options[k+1].value=s.options[k].value;
            s.options[k+1].text=s.options[k].text;
            s.options[k].value=Value;
            s.options[k].text=Text;
            s.options[k].selected=0;
            s.options[k+1].selected=1
        }
    }// End -->
    </script><form ACTION="" METHOD="POST">
    <table border="0">
        <tr>
            <td>
                <input type="button" value="▲" onclick="moveUp(this.form.list1)" name="B1"><br>
                <input type="button" value="▼" onclick="moveDown(this.form.list1)" name="B2"></td>
            <td>
                <select multiple size="5" name="list1">
                <option value="11"> item 1.1 </option>
                <option value="12"> item 1.2 </option>
                <option value="13"> item 1.3 </option>
                </select></td>
            <td>
                <input type="button" value=">>" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
                <input type="button" value="<<" onclick="move(this.form.list2,this.form.list1)" name="B2"></td>
            <td>
                <select multiple size="5" name="list2">
                <option value="21"> item 2.1 </option>
                <option value="22"> item 2.2 </option>
                <option value="23"> item 2.3 </option>
                </select></td>
            <td>
                <input type="button" value="▲" onclick="moveUp(this.form.list2)" name="B1"><br>
                <input type="button" value="▼" onclick="moveDown(this.form.list2)" name="B2"></td>
        </tr>
    </table>
    </form>
    <script language="javascript">
    <!--
    //-->
    </script>
    </body></html>
      

  13.   

    try(纠正了几个小BUG)
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>两个选择框上的内容可以左右互换-选项上下移动</title>
    </head><body>
    <script language="javascript">
    <!--
    sortitems = 1;  // Automatically sort items within lists? (1 or 0)function move(fbox,tbox) {
        for(var i=0; i<fbox.options.length; i++) {
            if(fbox.options[i].selected && fbox.options[i].value != "") {
                var no = new Option();
                no.value = fbox.options[i].value;
                no.text = fbox.options[i].text;
                tbox.options[tbox.options.length] = no;
                fbox.options[i].value = "";
                fbox.options[i].text = "";
                fbox.options[i].selected=0;
            }
        }
        BumpUp(fbox);
        if (sortitems) SortD(tbox);
    }function BumpUp(box)  {
    for(var i=0; i<box.options.length; i++) {
    if(box.options[i].value == "")  {
    for(var j=i; j<box.options.length-1; j++)  {
    box.options[j].value = box.options[j+1].value;
    box.options[j].text = box.options[j+1].text;
    }
    var ln = i;
    break;
       }
    }
    if(ln < box.options.length)  {
    box.options.length -= 1;
    BumpUp(box);
       }
    }function SortD(box)  {
    var temp_opts = new Array();
    var temp = new Object();
    for(var i=0; i<box.options.length; i++)  {
    temp_opts[i] = box.options[i];
    }
    for(var x=0; x<temp_opts.length-1; x++)  {
    for(var y=(x+1); y<temp_opts.length; y++)  {
    if(temp_opts[x].text > temp_opts[y].text)  {
    temp = temp_opts[x].text;
    temp_opts[x].text = temp_opts[y].text;
    temp_opts[y].text = temp;
    temp = temp_opts[x].value;
    temp_opts[x].value = temp_opts[y].value;
    temp_opts[y].value = temp;
          }
       }
    }
    for(var i=0; i<box.options.length; i++)  {
    box.options[i].value = temp_opts[i].value;
    box.options[i].text = temp_opts[i].text;
       }
    }function moveUp(s){
        var k=s.options.selectedIndex
        if(k>0){
            var Value = s.options[k-1].value;
            var Text = s.options[k-1].text;
            s.options[k-1].value=s.options[k].value;
            s.options[k-1].text=s.options[k].text;
            s.options[k].value=Value;
            s.options[k].text=Text;
            s.options[k].selected=0
            s.options[k-1].selected=1
        }
    }
    function moveDown(s){
        var k=s.options.selectedIndex;
        if(k<s.options.length-1 && k>=0){
            var Value = s.options[k+1].value;
            var Text = s.options[k+1].text;
            s.options[k+1].value=s.options[k].value;
            s.options[k+1].text=s.options[k].text;
            s.options[k].value=Value;
            s.options[k].text=Text;
            s.options[k].selected=0
            s.options[k+1].selected=1
        }
    }// End -->
    </script><form ACTION="" METHOD="POST">
    <table border="0">
        <tr>
            <td>
                <input type="button" value="▲" onclick="moveUp(this.form.list1)" name="B1"><br>
                <input type="button" value="▼" onclick="moveDown(this.form.list1)" name="B2"></td>
            <td>
                <select multiple size="5" name="list1">
                <option value="11"> item 1.1 </option>
                <option value="12"> item 1.2 </option>
                <option value="13"> item 1.3 </option>
                </select></td>
            <td>
                <input type="button" value=">>" onclick="move(this.form.list1,this.form.list2)" name="B1"><br>
                <input type="button" value="<<" onclick="move(this.form.list2,this.form.list1)" name="B2"></td>
            <td>
                <select multiple size="5" name="list2">
                <option value="21"> item 2.1 </option>
                <option value="22"> item 2.2 </option>
                <option value="23"> item 2.3 </option>
                </select></td>
            <td>
                <input type="button" value="▲" onclick="moveUp(this.form.list2)" name="B1"><br>
                <input type="button" value="▼" onclick="moveDown(this.form.list2)" name="B2"></td>
        </tr>
    </table>
    </form>
    <script language="javascript">
    <!--
    //-->
    </script>
    </body></html>