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:

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

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/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).

• javascript
• jquery

• Do you want to switch all options? or just the selected ones? – musefan Commented Oct 22, 2012 at 9:55
• you need to write the code that binds the link with the js? – Quicksilver Commented Oct 22, 2012 at 9: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 Commented Oct 22, 2012 at 10:11

3 Answers 3

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.

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;
    });
});

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/jQACe/3/