13

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/

SocioBit
  • 183
  • 1
  • 2
  • 7
  • I'm not sure why, but removing the selectmenu() call fixes it: http://jsfiddle.net/Brpcu/2/. – jimw Mar 29 '12 at 00:27
  • @jimw Without the selectmenu they are now just generic drop lists, I need the selectmenu for the styling – SocioBit Mar 29 '12 at 17:46
  • Indeed, but hopefully that will help work out what's wrong. What does the selectmenu call do? If you examine the DOM before and after the call, what changes? – jimw Mar 29 '12 at 22:45
  • http://stackoverflow.com/questions/10277866/refresh-jquery-ui-selectmenu-after-update/36821537#36821537 – Wasim A. Apr 24 '16 at 09:44

1 Answers1

15

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

Tats_innit
  • 33,991
  • 10
  • 71
  • 77
  • 4
    The first approach with the 'value' method does not work in JqueryMobile 1.1 anymore. "Error: no such method 'value' for selectmenu widget instance" – Wytze Nov 10 '13 at 19:14
  • http://stackoverflow.com/questions/10277866/refresh-jquery-ui-selectmenu-after-update/36821537#36821537 – Wasim A. Apr 24 '16 at 09:44