Script works without jQuery UI, but not with the jQuery UI selectmenu

Question

I, as a newbie to JS, created a very simple script to show and hide the "disabled" function in an select menu.

Everything works fine, untill i load jQuery UI for the selectmenu. Then it doesn't work anymore.

I tried all day to solve it, but can't. Perhaps anyone could help me out.

// Metadata
$('#year').change(function(){
    var sel = $(this); 
    var val = sel.val();

    if(val == "2008")
    {
         $('#c2').find("option:eq(1)").removeAttr("disabled");
    }
    else
    {
        $('#c2').find("option:eq(1)").attr("disabled", "disabled");

    }

});

What should be happening is that when anyone selects "2008" from #year, it should enable option 1 in #c2 and visa versa.

It seems possible here, but I am not able to bend the script down to my own piece of trial and error.

Updated code

<script>
// Metadata
$("#year").selectmenu({

    // listen to the select event of the custom menu, not the original dropdown
    select: function(){
        var val = $(this).val();

       if(val == "2008"){
             $("#c2").find("option:eq(2)").removeAttr("disabled");
        }
        else{
            $("#c2").find("option:eq(2)").attr("disabled", "disabled");
        }

        // must call this to reflect the change
        $("#c2").selectmenu("refresh");
    }
});
</script>

If I'm reading their source code correctly, you need to call selectmenu("refresh") after making a change. — Tim M.
– Tim M., Commented Aug 16, 2012 at 13:11

Tim M. · Accepted Answer · 2012-08-16 13:24:42Z

2

Looking at the source code for the demo page you linked, it appears that it is necessary to update selectmenu by calling its refresh method.

Example from the demo source:

files2.find("option:eq(0)").attr("disabled", "disabled");
files2.selectmenu("refresh"); // <-- this

I think that this is what you are looking for: http://jsfiddle.net/zuXSU/2/. When I change the menu, one of the options enables/disables.

Relevant Code

$("#year").selectmenu({

    // listen to the select event of the custom menu, not the original dropdown
    select: function(){
        var val = $(this).val();
        alert(val);

        if(val == "2008"){
             $(this).find("option:eq(1)").removeAttr("disabled");
        }
        else{
            $(this).find("option:eq(1)").attr("disabled", "disabled");
        }

        // must call this to reflect the change
        $(this).selectmenu("refresh");
    }
});

edited Aug 16, 2012 at 13:24

answered Aug 16, 2012 at 13:13

Tim M.

54.5k14 gold badges126 silver badges167 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Vlad Minaev Over a year ago

Also it has some kind of a documentation: wiki.jqueryui.com/w/page/12138056/Selectmenu

Tim M. Over a year ago

Thanks Vlad, I was having trouble finding the documentation since this appears to be a pre-release component.

mat Over a year ago

Thanks a lot for your help. I made some minor changed to your code (deleted the alert and changed $this into #c2. I am a step closer thanks to your help, but whatever option i select it always disables the field. The code is in the topic. edit Sorry i was to quick.. i forgot to change a 'this'. I'll try if everything works now.

Tim M. Over a year ago

Is #c2 another menu? I assumed you were changing options in a single menu based on the selection in the same menu. You can fork the jsfiddle I created if you want to add your actual markup.

mat Over a year ago

Yes #c2 is another menu. It works in the demo file, but i can't get it to work in the real file.. I keep on trying. Can i come back here and ask another question about this issue later?

|

Anant Dabhi · Accepted Answer · 2012-08-16 14:02:30Z

0

Try this

 $("#year").enableSelection();

May be this helps you

answered Aug 16, 2012 at 14:02

Anant Dabhi

11.2k3 gold badges33 silver badges51 bronze badges

1 Comment

Anant Dabhi Over a year ago

this method allow you to do selection

Collectives™ on Stack Overflow

Script works without jQuery UI, but not with the jQuery UI selectmenu

2 Answers 2

Relevant Code

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Relevant Code

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related