如何使用jQuery将列表框值转移到另一个列表框

Question

i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery I have sample code below but it is not working. 我想使用jquery将选定的值从列表框1转移到列表框2，反之亦然。我在下面有示例代码，但是它不起作用。

Hi guys please, i want to transfer the selected value from listbox 1 to listbox 2 viceversa using jquery I have sample code below but it is not working. 嗨，大家好，我想使用jquery将选定的值从列表框1转移到列表框2，反之亦然，我在下面有示例代码，但是它不起作用。

<!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <title>Listbox.js Demo</title>



    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js">  </script>
    <script>
    $(function () {
      $('select#planets').listbox();
      $('select#country').listbox({'searchbar': true});
    });
  </script>

    <script language="javascript" type="text/javascript">

    //this will move selected items from source list to destination list            
    function move_list_items(sourceid, destinationid)
    {
        $("#"+sourceid+"  option:selected").appendTo("#"+destinationid);
    }  
    </script>

  <!-- include listbox.js -->
  <link href="../src/listbox.css" rel="stylesheet">
  <script src="../src/listbox.js"></script>

    <style>
      * {
      margin:       0px;
      padding:      0px;
    }

    html, body {
      font-size:    12px;
      font-family:  sans-serif;
      background:   #f5f5f5;
    }

    .cover {
      padding:      20px 30px;
      border:       1px solid #dedede;
      border-radius:4px;
      background:   #f9f9f9;
      box-shadow:   0px 0px 10px #a8a8a8;

      /* centering */
      position:     absolute;
      top:          50%;
      left:         50%;
      margin-top:  -180px;
      margin-left: -222px;
    }

    .lbjs { float: left; }
    .lbjs:last-of-type { margin-left: 20px; }
  </style>
    <body>

      <div class="cover">
    <select id="country" name="country" >
      <option>Afghanistan</option>
      <option>Albania</option>
      <option>Algeria</option>
      <option>Andorra</option>
    </select>
    <input id="moveright" type="button" value="  >  "     onclick="move_list_items('country','planets');" />

    <select id="planets" multiple="multiple" name="planets">
      <option>Alderaan</option>
      <option>Corellia</option>
      <option>Endor</option>
      <option>Kashyyyk</option>
    </select>
  </div><!-- .cover -->

</body>
</html>

Answer 1

$(document).ready(function () {   
 $("#moveright").click(function(){
       $("#country > option:selected").each(function(){
            $(this).remove().appendTo("#planets");
       });
    });
});

Demo: 演示：

http://jsfiddle.net/Rc7qP/ http://jsfiddle.net/Rc7qP/

Update: 更新：

http://jsfiddle.net/fLAy6/1/ http://jsfiddle.net/fLAy6/1/

Answer 2

Please have a look into the following link it seems working 请查看以下似乎有效的链接

$("#moveright").on('click' , function(){
    alert("test");
    var obj = ($("#country option:selected"));
    $.each(obj, function(index , item){ 
         $("#planets").append($(this));
    });

});

$("#moveleft").on('click' , function(){
    alert("test");
    var obj = ($("#planets option:selected"));    
     $.each(obj, function(index , item){ 
         $("#country").append($(this));
    });
});

如何使用jQuery将列表框值转移到另一个列表框

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-04-15 09:53:31

解决方案2
1 2014-04-15 10:33:32

如何使用jQuery将列表框值转移到另一个列表框

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-04-15 09:53:31

解决方案2 1 2014-04-15 10:33:32

解决方案1
1 已采纳 2014-04-15 09:53:31

解决方案2
1 2014-04-15 10:33:32