jquery ui selectmenu, regarding changing selected items

Question

I'm trying to implement a currencty converter which I succeeded but now I'm implementing a button that will change the selected option between two selected menus which means that if in the first menu I have usd selected and in the second menu I have gbp selected then when pressing the button, I want in the first menu to have the gbp selected and in the second menu the usd selected. I have manage to change the selected option on both menus, but it doesn't display it in the menu itself. What have I forgot ?

 $(function(){
    $('a#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var val1 = $sel1.val();
        var $sel2 = $('#toCurrency');
        var val2 = $sel2.val();
        $sel1.find("option[value='"+val1+"']").attr("selected",false);
        $sel1.find("option[value='"+val2+"']").attr("selected",true);
        $sel2.find("option[value='"+val2+"']").attr("selected",false);
        $sel2.find("option[value='"+val1+"']").attr("selected",true);
    });
});

Here is a screen shot, when pressing on the icon in the middle, nothing changes here, but only in the code itself. If I press the icon, I want the usd to appear in "from" and inr in "to".

jsfiddle.net example

Answer 1

Turns out the selectmenu() function has it's own ways of changing values.
Check out a working version here: http://jsfiddle.net/atR6D/55/

$('#switchButton').click(function(){
    var sel1 = $('#fromCurrency').selectmenu("value");
    var sel2 = $('#toCurrency').selectmenu("value");
    $('#fromCurrency').selectmenu("value", sel2);
    $('#toCurrency').selectmenu("value", sel1);
});  

It looks like it's making a representation of the select list in <span> tags which is why you can't actually change the original select list.

Answer 2

 $(function(){
    $('#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var $sel2 = $('#toCurrency');

        var tmp = $sel2.val();
        $sel2.val($sel1.val());
        $sel1.val(tmp);

    });
});

And here is the demo.

Answer 3

From http://wiki.jqueryui.com/w/page/12138056/Selectmenu:

Methods:
   refresh
       parses the original element again, updates the value option and
       rerenders the menu triggers events if value changed 

So just add that after making the changes to the underlying selects:

$(function(){
    $('a#switchButton').click(function(){
        var $sel1 = $('#fromCurrency');
        var val1 = $sel1.val();
        var $sel2 = $('#toCurrency');
        var val2 = $sel2.val();
        $sel1.find("option[value='"+val1+"']").attr("selected",false);
        $sel1.find("option[value='"+val2+"']").attr("selected",true);
        $sel2.find("option[value='"+val2+"']").attr("selected",false);
        $sel2.find("option[value='"+val1+"']").attr("selected",true);

        $sel1.selectmenu('refresh');
        $sel2.selectmenu('refresh');

        return false;
    });
});