jQuery UI Selectmenu
In this article, we are going to build a select menu using jQuery UI selectmenu widgets that can provide us select options. We can use this widget to make a form for different actions.
Syntax:
$( ".selector" ).selectmenu();
Parameter: It does not accept any parameter.
Return value: It returns a selectmenu from jQuery UI.
Pre-compiled files: Please download the libraries and then use the path for the given script below.
<link rel=”stylesheet” href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
Example: In this example, we can see that we are going to build a simple select menu using the selectmenu widget of jQuery UI.
HTML
<!doctype html> < html lang = "en" > < head > < meta charset = "utf-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1" > < link href= "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/ themes/ui-lightness/jquery-ui.css" rel = "stylesheet" type = "text/css" /> < script src = "https://code.jquery.com/jquery-1.12.4.js" > </ script > < script src = "https://code.jquery.com/ui/1.12.1/jquery-ui.js" > </ script > < script > $(function () { $("#title").selectmenu(); }); </ script > < style > .ui-menu { width: 150px; } .widget-header { padding: 0.2em; color: white; } </ style > </ head > < body > < h3 > Beginner for Beginner Selectmenu Using jQuery UI </ h3 > < div > < form action = "#" > < fieldset > < label for = "title" >Select a title</ label > < select name = "title" id = "title" > < option disabled selected> Please pick one</ option > < option >Python</ option > < option >Java</ option > < option >HTML</ option > < option >C++</ option > < option >Other</ option > </ select > </ fieldset > </ form > </ div > </ body > </ html > |
Output:
References: https://jqueryui.com/selectmenu/
Contact Us