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>

Curious--why are the values associated with the city options different between the departure and arrival list? I suspect you'd have an easier time if the value of London was 1 in both lists, for example. — Nick, Sep 02 '17 at 23:10
@heybignick That's actually necessary, or he would never be able to have consistent values that he sends to the server, short of sending the entire city names. — forumulator, Sep 02 '17 at 23:41

score 5 · Accepted Answer · answered Sep 03 '17 at 01:03

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>

jconder · Answer 2 · 2017-09-03T01:07:13.840

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>

score 0 · Answer 3 · answered Sep 02 '17 at 23:39

0

You'll have to manually swap the elements using jQuery. That is, reverse the From and To selections. A clean way is to create a selectCity function, (which should also be you on-click function for manual city selection by user).

I assume you have an attribute data-id to identify the city id, in addition to what you have shown. Here's how you do the swap:

function getSelected($sel) {
    return $sel.children("option[selected]").data("id");
}

function selectCity($sel, newId) {
    var $current = $sel.children("option[selected]");

    var $new;
    // Add attr selected to the city with newId
    ($new = $sel.children("option[data-id='" + newId + "']")).length
    && $new.attr("selected", "");

    if ($new.length) {      
        $current.removeAttr("selected");
    }
}

function swap() {
    var $from = $(".airport-select__departure"),
    $to = $(".airport-select__arrival");

    var fromId = getSelected($from),
    toId = getSelected($to);

    // Swap selections
    selectCity($from, toId);
    selectCity($to, fromId);
}

$(".select-swap").click(swap);

answered Sep 02 '17 at 23:39

forumulator

836
12
12

If the intention is to simply swap the selected arrival city with the selected destination city, he'll need to do a bit more than that because in the example case the selected arrival city "New York(JFK)" does not exist in the list of destination cities. – jconder Sep 03 '17 at 00:50
@jconder I actaully missed that. But then, he has two options 1.) Add the city if it does not exist 2.) Swap the entire lists, neither of which makes sense. In reality, in case of Airline travel, it makes sense that the list of cities is actually the exact same on both sides, with values and text, as Mohamed Abhulnasr points out in his answer above. – forumulator Sep 03 '17 at 04:44
I'm not sure it's productive to claim what makes sense with such limited information but, at the very least the first case is very reasonable: restricting the selected departure city from the list of arrival cities and vice versa is a common application: usually you wouldn't want the user to submit the same city for both arrival and departure destinations. – jconder Sep 03 '17 at 10:50

How to swap selected option in 2 select elements?

3 Answers3

Linked