JQuery UI selectmenu not styling

Question

Bit of a daft question but I've downloaded the JqueryUI selectmenu widget and it isn't working even though Firebug shows the relevant CSS and JavaScript files being loaded.

Script on page:

<script type="text/javascript">
   $('#brand_color').selectmenu({style:'popup'});
</script>

Generated form markup:

<label for="brand_color">Color</label><br />
<select id="brand_color" name="brand[color]">
   <option value="red">red</option>
   <option value="green">green</option>
   <option value="blue">blue</option>
   <option value="black">black</option>
</select><br />

Rails form code:

<%= f.label :color %><br />
<%= f.select(:color, Brand::COLORS) %><br />

Answer 1

Hi It definitely has to do with including all the required scripts. It is a little hard to tell exactly what you need from this demo, but I made sure to include all the same scripts and made an example: http://jsfiddle.net/8WWMT/7/

here are all the scripts:

<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/themes/base/jquery.ui.all.css">
<script src="http://view.jqueryui.com/selectmenu/jquery-1.8.0.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.menu.js"></script>
<script src="http://view.jqueryui.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<link rel="stylesheet" href="http://view.jqueryui.com/selectmenu/demos/demos.css">​

Also you have to make sure that you JS is called after your HTML elements are rendered. You can either do this by positioning your <script> tag after you HTML elements, like this. Or by enclosing the JS inside the $(function(){});, like this:

<script type="text/javascript">
    $(function(){
        $('#brand_color').selectmenu({style:'popup'});
    });
</script>

http://jsfiddle.net/8WWMT/10/

notice how the styling does not work if you put the script part above the HTML elements without using the $(function(){}); (ready function): http://jsfiddle.net/8WWMT/11/