How do I add the jqueryui selectmenu plugin to my page?

Question

I'm trying to add the selectmenu jqueryui plugin to my page. I have gone to https://github.com/fnagel/jquery-ui and copied the file jquery.ui.selectmenu.js from the ui folder. I have then included a link to this javascript from my page. I have a fresh install of jquery and jqueryui installed and other functionality is ok but when I add a $('select').selectmenu(); to my page I end up with a horrible mess. All of the new selectmenus are appended to the bottom of the page instead of replacing the selects.

Is there a step I've missed?

The following is the html from the page showing the files I have linked to. My understanding is that the custom.css and custom.min.js files should have all of the scripts and stylesheets I need in them. Is this wrong?

<link href="/stylesheets/jquery-ui-1.8.6.custom.css?1289473366" media="screen" rel="stylesheet" type="text/css" />
<script src="/javascripts/jquery-1.4.2.min.js?1288662624" type="text/javascript"></script>
<script src="/javascripts/jquery-ui-1.8.6.custom.min.js?1289401432" type="text/javascript"></script>
<script src="/javascripts/jquery.ui.selectmenu.js?1289469657" type="text/javascript"></script>

A datepicker item I have on my page is displayed with the appropriate css applied.

Answer 1

The fact that selectmenu() does not trigger an error shows, that the plugin is loaded correctly. The messed up display could be caused by missing css files. Have you included all necessary css files from the themes folder or jquery ui?

Answer 2

From what i can see, you are using a fork jQuery UI version of selectmenu, and you need appropriate styles in order to get the expected results as @brad noticed in the first place.

Adding only

jquery-ui-1.8.6.custom.css

as a reference will not solve your specific selectmenu requirements, you need to add another css reference that will include proper styling rules for the selectmenu elements.

Answer 3

There is a small issue in the jquery.ui.selectmenu.js file.

One div is appended at the end of the body instead of being inserted after the element of the select. So if you have only one select it works fine. If you want to add several selects then you need to change the plugin from:

...
this.listWrap = $( "<div />", {
        'class': self.widgetBaseClass + '-menu'
    }).append( this.list ).appendTo( o.appendTo );
...

to:

...
this.listWrap = $( "<div />", {
        'class': self.widgetBaseClass + '-menu'
    }).append( this.list ).insertAfter( this.element );
....