帮助 jQuery select 菜单样式

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();
});

Answer 2

why don't you try to give an id or class to the select. then you can call it from jquery by using it id or class. i don't know it will work or not, but worth it a try.