使用单击将值从列表框传递到另一个列表框

Question

我是新手 Jquery。我一直在解决这个问题，但没有任何解决方案，所以我将不胜感激。

我在 HTML 中有两个列表框（lstbox1 和 lstbox2），我正在使用 Jquery 将值从一个列表框传递到另一个列表框。这段代码的问题在于，一旦我将一个选项从 lstbox1 移动到 lstbox2 并再次单击该选项以 return 它返回没有任何反应。有一次，我从 lstbox1 或 lstbox2 移动了一个选项，我不能 return 它到它以前的位置。

$(document).ready(function() {
   
 $("#lstBox1 option").click(function () {
   var selectedOp1 = $('#lstBox1 option:selected');
   $('#lstBox2').append($(selectedOp1).clone());
        $(selectedOp1).remove();
    });

    $("#lstBox2 option").click(function () {
   var selectedOp2 = $('#lstBox2 option:selected');
   $('#lstBox1').append($(selectedOp2).clone());
        $(selectedOp2).remove();
    });
 
 
 
});

#lstBox1 {
 width: 200px;
 height: 200px;
}
#lstBox2 {
 width: 200px;
 height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style='width:370px;'>
    <tr>
        <td style='width:260px;'>
            <b>Group 1:</b><br/>
           <select multiple="multiple" id='lstBox1'>
              <option value="1">Ajax</option>
              <option value="jquery">jQuery</option>
              <option value="javascript">JavaScript</option>
              <option value="mootool">MooTools</option>
              <option value="prototype">Prototype</option>
              <option value="dojo">Dojo</option>
        </select>
    </td>
    
    <td style='width:260px;'>
        <b>Group 2: </b><br/>
        <select multiple="multiple" id='lstBox2'>
        <option value="C#">C$</option>
        <option value="Java">Java</option>
        <option value="HTML">HTML</option> 
        </select>
    </td>
</tr>
</table>

Answer 1

不要在 #lstBox2 option 上添加点击事件，而是仅在 #lstBox2 上添加。

更新代码

$(document).ready(function() {

    $("#lstBox1").click(function () {
         var selectedOp1 = $('#lstBox1 option:selected');
         $('#lstBox2').append($(selectedOp1).clone());
        $(selectedOp1).remove();
    });

    $("#lstBox2").click(function () {
         var selectedOp2 = $('#lstBox2 option:selected');
         $('#lstBox1').append($(selectedOp2).clone());
        $(selectedOp2).remove();
    });



});

使用单击将值从列表框传递到另一个列表框

passing values from a listbox to another using click

jquery

listbox