使用点击

Question

我是使用Jquery的新手。我一直在解决此问题，没有任何解决方案，因此，我将不胜感激。

我在HTML中有两个列表框（lstbox1和lstbox2），我正在使用Jquery将值从一个列表框传递到另一个列表框。这段代码的问题是，一旦我将一个选项从lstbox1移到了lstbox2，然后再次单击该选项以将其返回，则什么也没有发生。一次，我将一个选项从lstbox1或lstbox2中移出，无法将其返回到之前的位置。

$(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();
    });



});