Jquery 如何交换两个选择框的选项

我有两个选择框，如下所示

    <form name="test">
        <select id="s1" name="select1">
         <option selected>1</option>
         <option>2</option>
         <option>3</option>
        </select>

        <select id="s2" name="select2">
         <option>1</option>
         <option>2</option>
         <option selectd>3</option>
        </select>

<input type="button" value="swap" id="swap">

    </form>

$("#swap").click(function(){
 v1=document.getElementById("s1");
 v2=document.getElementById("s2");
 document.form.select1.value=v2;
 document.form.select2.value=v1;
});

但是我没有得到结果。我在做什么

提前感谢,

肖巴

1.
2.
3.
4.
-->
实际上，两个选择框中的选项是相同的。是的，我希望选择的选项应该被更改。当您使用jQuery作为代码媒介时，如果您可以在jQuery中自己编写所有代码，那么它将变得整洁、更好、更容易。您可以替换这个冗长的
文档。getElementById（“s1”）$（'#s1'）
。在您的代码中，它与jQuery和javascript混合在一起。因此，请考虑这是一个建议，为您未来的编码。当然……thnkk为您的建议：-）它不工作，当我使用SCORTET2搜索在选择框。你能为这个问题提供帮助吗？请不要只发布代码作为答案，还要解释你的代码的作用以及它是如何解决问题的。带有解释的答案通常更有帮助，质量更好，更容易吸引选票。
$('#swap').click(function(){
    var v1 = $('#s1').val(),
        v2 = $('#s2').val();
    $('#s1').val(v2);
    $('#s2').val(v1);
});

  <select name="" id="select_one" multiple>
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
  </select>
  <button onclick="swap('select_one','select_two','left_to_right')">--></button>
  <button onclick="swap('select_one','select_two','right_to_left')"><--</button>
  <select name="" id="select_two" multiple>
     <option value="5">1*5</option>
     <option value="6">2*5</option>
     <option value="7">3*5</option>
     <option value="8">4*5</option>
  </select>
  <script>
     var cloneArr = function(arr){
         var result = [];
         for(var item=0; item<arr.length;item++){
             result[item]=arr[item];
         }
         return result;
     }
     
     function swap(select_one,select_two,direction='left_to_right') {
         select_one = document.querySelector('#select_one');
         select_two = document.querySelector('#select_two');            
         if (direction=='left_to_right') {
             var oneOptions = select_one.selectedOptions;
            var arr = cloneArr(oneOptions);
             for(var item=0; item<oneOptions.length;item++){
                 select_one.remove(oneOptions[item].index);
             }
             for(var item=0; item<arr.length;item++){
                 select_two.add(arr[item]);
             }
         }
     
         if (direction=='right_to_left') {
             var twoOptions = select_two.selectedOptions;
            var arr = cloneArr(twoOptions);
             for(var item=0; item<twoOptions.length;item++){
                 select_two.remove(twoOptions[item].index);
             }
             for(var item=0; item<arr.length;item++){
                 select_one.add(arr[item]);
             }
         }
         
     }
  </script>