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.
<!doctype html> < html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content =
"width=device-width, initial-scale=1" >
< link href=
themes/ui-lightness/jquery-ui.css"
rel = "stylesheet" type = "text/css" />
</ script >
</ script >
< script >
$(function () {
$("#title").selectmenu();
});
</ script >
< style >
.ui-menu {
width: 150px;
}
.widget-header {
padding: 0.2em;
color: white;
}
</ style >
</ head >
< body >
< h3 >
Geeks for Geeks 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/