jQuery UI Select Menu

by Naveen Jose

HTML

<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">
<select id="powerSelect">
    <option value='na'>Month</option>
    <option value='1'>January</option>
    <option value='2'>February</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
    <option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
    <option value='10'>October</option>
</select>

JavaScript

$(function() {
    var options = [];
    //for (i = 0; i < json.powerDropDownItems.length; i++) {
        //options.push("<option value='" + json.powerDropDownItems[i] + "'>" + json.powerDropDownItems[i] + "</option>");
    //}
    options.push("<option value='11'>November</option>");
    options.push("<option value='12'>December</option>");
    $('#powerSelect').append(options.join("")).selectmenu();
});