How to swap selected option in 2 select elements?

Question

I use 2 select element and i can't swap the cities in the select field, when the button is clicked:

<div class="select-wrapper">
    <select class="airport-select__departure">
        <option value="1" selected>London(LGW)</option>
        <option value='2'>Paris(SHG)</option>
        <option value='3'>Vancouver(VAI)</option>
    </select>
    <button class="select-swap">&nbsp;</button>
</div>

<select class="airport-select__arrival">
    <option value='1' selected>New York(JFK)</option>
    <option value='2'>London(LGW)</option>
    <option value='3'>Vancouver(VAI)</option>
</select>

Answer 1

First The logical steps are:
1- both lists have to be same data exact (value and text) to be able for swapping.
2- Add the Click event Handler to the button. as following..

Second the Code:

JQuery:

$(document).ready(function() {
    $(".select-swap").on('click', function (ev) {
        swaper();
    });
});

function swaper () {
    var co=$(".airport-select__departure").val();
    $(".airport-select__departure").val($(".airport-select__arrival").val());
    $(".airport-select__arrival").val(co);
}

HTML:

<div class="select-wrapper">
    <select class="airport-select__departure">
        <option value='1' selected>London(LGW)</option>
        <option value='2'>New York(JFK)</option>
        <option value='3'>Paris(SHG)</option>
        <option value='4'>Vancouver(VAI)</option>
    </select>
    <button class="select-swap">&nbsp;</button>
</div>
<select class="airport-select__arrival">
    <option value='1'>London(LGW)</option>
    <option value='2' selected>New York(JFK)</option>
    <option value='3'>Paris(SHG)</option>
    <option value='4'>Vancouver(VAI)</option>
</select>

Answer 2

Assuming you mean to swap the entire depatures list with the entire arrivals list, this works:

/* Set a click handler for the button */
$('.select-wrapper > .select-swap').click(function() {
      /* Store the list of depatures and arrivals as they are */
      var $departures = $('.airport-select__departure option');
      var $arrivals = $('.airport-select__arrival option');

      /* Store the selected values */
      var departure = $('.airport-select__departure option:checked').text();
      var arrival = $('.airport-select__arrival option:checked').text();

      /* Swap the option lists */
      $('.airport-select__arrival').append($departures);
      $('.airport-select__departure').append($arrivals);

      /* Re-set the selected values */
      $('.airport-select__arrival option:contains(' + departure + ')').prop('selected', true);
      $('.airport-select__departure option:contains(' + arrival + ')').prop('selected', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select-wrapper">
    <select class="airport-select__departure">
        <option value="1" selected>London(LGW)</option>
        <option value='2'>Paris(SHG)</option>
        <option value='3'>Vancouver(VAI)</option>
    </select>
    <button class="select-swap">&nbsp;</button>
</div>

<select class="airport-select__arrival">
    <option value='1' selected>New York(JFK)</option>
    <option value='2'>London(LGW)</option>
    <option value='3'>Vancouver(VAI)</option>
</select>