jQuery UI Selectmenu Widget Testing (latest)

https://github.com/fnagel/jquery-ui/wiki/Selectmenu Selectmenu CSS and JS files are cached via my own server. Please use only for testing!

by Akram kamal

HTML

<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.core.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.theme.css">
<link rel="stylesheet" href="http://github.felixnagel.com/selectmenu/themes/base/jquery.ui.selectmenu.css">
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.core.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.widget.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.position.js"></script>
<script src="http://github.felixnagel.com/selectmenu/ui/jquery.ui.selectmenu.js"></script>
<form action="#">
    <br /><br />
    <fieldset>
        <label for="year">Year:</label>
        <select name="year" id="year">
            <option value="2005">2005</option>
            <option value="2006" selected="selected">2006</option>
            <option value="2007">2007</option>
            <option value="2008">2008</option>
            <option value="2009">2009</option>
        </select>
    </fieldset>
        <label for="c2">Submenu:</label>
        <select name="c2" id="c2">
            <option value="val1">1</option>
            <option value="val2">2 [disable this when year is 2008]</option>
            <option value="val3">3</option>
            <option value="val4">4</option>
            <option value="val5">5</option>
        </select>
</form>

CSS

/* demo styles */
body {font-size: 62.5%; font-family:"Verdana",sans-serif; }
fieldset { border:0; }  
label,select,.ui-select-menu { float: left; margin-right: 10px; }
select { width: 300px; }    
.wrap span.ui-selectmenu-item-header,
.wrap ul.ui-selectmenu-menu li a { text-decoration: underline !important; }

JavaScript

$(function(){            
    $('select#year').selectmenu({
        select: function()
        {
            var val = $(this).val()
            if(val == "2008")
            {
                $('#c2').selectmenu('disable', 1);
            }
            else
            {
                $('#c2').selectmenu('enable', 1);
            }
        }
   });
    $('select#c2').selectmenu();            
});