CODEWITHSUNDEEP
javascriptjqueryajaxjquery-mobile
user1452893
user1452893

Reputation: 868

Why does this select menu fail in new version combo of jQuery and JQM?

Would like to extend this code but noticed it fails to limit the selection (by count) in the newer versions of jQuery and JQM.

Here is a fiddle that shows it works with jQuery 1.8.3 and JQM 1.2.0.

The jQuery (less the Select itself) code is here:

$(document).on("pageinit", function () {
    $("#select").on("change", function () {
        var selected = $("option:selected", this).length;
        if (selected == 4) {
            $("option:not(:selected)", this).prop("disabled", true);
            $(this).selectmenu("refresh");
        }
        if (selected < 4) {
            $("option:disabled", this).prop("disabled", false);
            $(this).selectmenu("refresh");
        }
         arr = new Array();
                    $(this).find("option:selected").each(function(index, item) {
                        arr.push($(item).val());
                        console.log(arr);
                    });
    });
});

You can simulate the failure in the fiddle by switching to jQuery 1.11.0 and JQM 1.4.4.

Then, select a 5th option which should be prevented but is allowed.

What am I missing that would cause this to fail with the new versions?

PS: Any pointers to the best approach to populate the select box with an $.ajax GET are appreciated too since that will be my next step. I'm using a POST to save the selection but want to present the user with what they've already saved when they need to update.

Upvotes: 0

Views: 78

Answers (1)

Ahmad Ibrahim
Ahmad Ibrahim

Reputation: 1925

You have to pass true as a second argument to the selectmenu function, to force it to refresh the menu after disabling the option. Check this Fiddle

$(this).selectmenu("refresh", true);

Upvotes: 1

Related Questions