Question

I’m trying to use the jQuery UI to style my HTML select menu but I’m having a little trouble getting it working… I’m still relatively new to using jQuery so the answer to this may be fairly simple.

My full code segment (using jQuery v1.6.2):

<link rel="stylesheet" type="text/css" href="css/ui-darkness/jquery.css">
<label for="favorite">Select favorite team</label>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jqueryui.js"></script>
    <script type="text/javascript" src="js/selectmenu.js"></script></script>
    <script type="text/javascript">$(function() {
            $('select[name=favorite]').selectmenu();
        });
    </script>

    <select name='favorite'>
        <?php

            while ($temp = mysql_fetch_assoc($query)) {
                echo "<option value=" . $temp['id'] . ">" . htmlspecialchars($temp['teamname']) . "</option>";
            }
        ?>
    </select>

But it doesn’t seem to do anything. My select menu appears as a normal, boring HTML select menu. I’m really not sure at all if what I’m doing is completely retarded or what, but let me know if you know how to get this working properly.

EDIT Console gives error Uncaught TypeError: Object [object Object] has no method 'selectmenu'

Answer 1

$('select[name=favorite]').selectmenu();

You must set the name of the element you want to use. In this case, a select box with the name favorite.

You must also place the code within jQuery’s document ready function

$(document).ready(function() {
   $('select[name=favorite]').selectmenu();
});

or use the shorthand

$(function() {
   $('select[name=favorite]').selectmenu();
});