jQuery UI Selectmenu value set dynamically does not change visible selected value

Question

I am using jQuery UI Selectmenu and am having trouble setting the value of a rendered selected. It seems to change the selected option in the underlying select, but the selectmenu does not show the change. I am calling .selectmenu('refresh', true) but nothing happens.

Here is an example: http://jsfiddle.net/sociobit/wYBeL/

Answer 1

Hiya So demo (Solution) http://jsfiddle.net/wYBeL/43/ instead of refresh try .selectmenu("value", selectedValue); OR (Hack) http://jsfiddle.net/wYBeL/36/ (keeps the selectpopup setting of yours :) What ever suits you

So I checked the DOM using firebug and it seems the selectmenu() style: popup adds extra layer of styling but the #sel2 value is set correctly and you just need to setup the right element with correct value. I reckon refresh will work when you will have an ajax populating a dropdown and refreshing part of page.

Hmm, you can try looking at API for more details and In case if you don't need selectmenu popup then without it this will work as well like @jiimw said: (BUt styling goes weird) : http://jsfiddle.net/wYBeL/35/ ;Please let me know if this doesn't help I will remove post.

extra link: http://wiki.jqueryui.com/w/page/12138056/Selectmenu

Hope both helps.

JQuery Code here

$(function() {

    $('select').selectmenu({
        style: 'popup'
    });

    $('#chksame').click(function() {
        if ($(this).is(':checked')) {
            var selectedValue = $('#sel1').val();
            $('#sel2').val(selectedValue);

            $('#sel2').selectmenu("value", selectedValue);

        }

    });
});​

** OR **

$(function() {

        $('select').selectmenu({
            style: 'popup'
        });

        $('#chksame').click(function() {
            if ($(this).is(':checked')) {
                var selectedValue = $('#sel1').val();
                $('#sel2').val(selectedValue);

                // set the right element with the select value
                $('#sel2-button span').text($("#sel2 option[value='" + selectedValue +"']").text());

                $('#sel2').selectmenu('refresh', true);

            }

        });
    });​

Cheers