Enhancing a select menu
In our final menu example, let's look at how you can use the power of a menu widget to enhance a <select>
menu. The original author of this book, Dan Wellman, produced an excellent example of how to achieve this using some additional jQuery and techniques we've already covered earlier in this book. I've updated it to work with jQuery 2.03 and UI 1.10.3.
Replace the existing markup in menu2.html
with the following:
<body> <select id="selectmenu"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </body>
From the code download that accompanies this book, extract a copy of the menuSelect.js
file, then save it in the the js
folder, and link it to immediately below the last jQuery UI library reference to jquery.ui.menu.js
.
In menu2.html
, change the second <link>
to point...