CODEWITHSUNDEEP
jqueryhtml
user2335484
user2335484

Reputation: 43

How to Swap the options of two select Boxes

I have a Two select Boxes as below.

    <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>

"1" is selected in the select box 1 and "3" is selected in the select box 2.

Now by clicking a button those two value should swap. Means "3" in select box 1 and "1" in select box 2.

I have tried some jquery for that. That code is as below.

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

But i didnt get the result. Whats wrong i am doing.??

Thanks in advance,

Shoba.

Upvotes: 0

Views: 2026

Answers (2)

sorbon gulmirzoev
sorbon gulmirzoev

Reputation: 1

  <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>

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50767

$('#swap').click(function(){
    var v1 = $('#s1').val(),
        v2 = $('#s2').val();
    $('#s1').val(v2);
    $('#s2').val(v1);
});

Works fine for me.

Upvotes: 8

Related Questions