How to swap values in select lists with jquery?

Question

I have two simple select lists and want to add an option to swap values in them. So, there is the first list with e. g. value "ONE" and the other list has value "TWO". When you click "swap" button, the first one should have the value of "TWO" and the second one should have the value "ONE".

Here is jsFiddle: http://jsfiddle.net/YPyRF

Here is the HTML code:

<div class="form-item-from">
  <label for="form-item-from">From </label>
 <select class="form-select" id="form-item-from"><option value="ONE">ONE</option></select>
</div>

<div class="form-item-to">
  <label for="form-item-to">From </label>
 <select class="form-select" id="form-item-to"><option value="TWO">TWO</option></select>
</div>

<a href="">Swap values</a>

Here is js code (from Is there a native jQuery function to switch elements?):

jQuery("#form-item-from").after(jQuery("#form-item-to"));

However, this is not working in this case. Additionally, the function shouldn't be dependant on the position of select lists or swap button (I found one solution where the swap button has to be between two lists).

Do you want to switch *all* options? or just the selected ones? — musefan, Oct 22 '12 at 09:55
example is not very explicit since each select has only one option and they are different. A value change requires less code than html modification. Give full explanation of relatiship of selects and the goals — charlietfl, Oct 22 '12 at 10:11

musefan · Accepted Answer · 2012-10-22T10:09:15.230

5

Something like this will work:

$("#SwapButton").click(function(e) {
    e.preventDefault();//This prevents the A tag from causing a page reload

    //Get the values
    var fromVal = $("#form-item-from option:selected").val();
    var fromText = $("#form-item-from option:selected").text();
    var toVal = $("#form-item-to option:selected").val();
    var toText = $("#form-item-to option:selected").text();

    //Set the values
    $("#form-item-from option:selected").val(toVal);
    $("#form-item-from option:selected").text(toText);
    $("#form-item-to option:selected").val(fromVal);
    $("#form-item-to option:selected").text(fromText);
});

Here is your fiddle, updated

NOTE: This will only switch the option items that are selected. If this is not what you want then I have misunderstood and you may be better to use Adam's solution. Here is a better example that illustrates the fact it only swap the selected values.

edited Oct 22 '12 at 10:09

answered Oct 22 '12 at 09:53

musefan

47,875
21
135
185

+1 for the example that only swaps the selected item. Could be useful for somebody else – Adam Tomat Oct 22 '12 at 10:03
Yes, the option has a class "selected", so this is what I need. Thank you! – take2 Oct 22 '12 at 10:12
1

Sry, forgot it, since I was checking who answered first and then realized that I need "selected" option. Anyway, answer accepted now :) – take2 Oct 22 '12 at 10:21
can be greatly simplified using `clone()` and `replaceWith()` – charlietfl Oct 22 '12 at 10:36

score 2 · Answer 2 · answered Oct 22 '12 at 09:53

Try something like this: jsfiddle

When you click on the link...
1) save all the options in #form-item-from into a variable
2) save all the options in #from-item-to into a variable
3) update #from with the options from #to
4) update #to with the options from #from

$(function() {
    $("a").click(function() {
        var selectOne = $("#form-item-from").html();
        var selectTwo = $("#form-item-to").html();

        $("#form-item-from").html(selectTwo);
        $("#form-item-to").html(selectOne);
        // stops the link going anywhere
        return false;
    });
});

Thank you for the answer, it works, but I forgot to mention that the options have "selected" class if they are selected. I thought that there is no difference. — take2, Oct 22 '12 at 10:13

Muthu Kumaran · Answer 3 · 2012-10-22T10:13:47.360

2

Try this,

$("a").click(function(e){
    e.preventDefault();        
    var a = jQuery("#form-item-from").html();
    var b = jQuery("#form-item-to").html();
    jQuery("#form-item-from").html(b);
    jQuery("#form-item-to").html(a);
})

Demo: http://jsfiddle.net/jQACe/3/

edited Oct 22 '12 at 10:13

answered Oct 22 '12 at 09:58

Muthu Kumaran

17,682
5
47
70

I don't like this answer, your example code does not demonstrate how you are preventing the default action of the `A` tag. If somebody was to use this answer as you have posted, then they would likely experiences problems with a page refresh. – musefan Oct 22 '12 at 10:08
Check out the jsfiddle code, I used `href="javascript:void(0)"` – Muthu Kumaran Oct 22 '12 at 10:10
Yes, I know how you did it, but you shouldn't assume that link will always be valid. I also personally don't like mixing inline javascript like this - it makes it harder to understand and find bugs – musefan Oct 22 '12 at 10:11

How to swap values in select lists with jquery?

3 Answers3

Linked