To extend the functionality of a native HTML select element, the jQuery UI Selectmenu is used. The customization functionality in behavior and appearance provided by the jQuery UI Selectmenu is far beyond the limitation of a native select. A decent replacement of a select element is thus provided. The jQuery UI Selectmenu widget also acts as a proxy back to the original select element. It thus controls its state for form submission or serialization.
Example 1:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https:/resources/demos/style.css">
<script>
$(function() {
( "#subject" ).selectmenu();
$( "#age" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
</script>
<style>
fieldset {
border: 2px solid brown;
}
label {
display: block;
margin: 20px 0 0 0;
}
select {
width: 300px;
}
.overflow {
height: 180px;
}
</style>
</head>
<body>
<div class="demo">
<form action="#">
<fieldset>
<label for="degree">Degree:</label>
<select name="degree" id="degree">
<option selected="selected">Engineering</option>
<option>Medical</option>
<option>Accounting</option>
<option>Marketing</option>
<option>Teaching</option>
</select>
<label for="subject">Subject Brochure:</label>
<select name="subject" id="subject">
<optgroup label="Scripts">
<option value="Mathematics">Mathematics.pdf</option>
<option value="Biology">Biology.pdf</option>
</optgroup>
<optgroup label="Others">
<option value="science">Science.pdf</option>
<option value="arts">Arts.pdf</option>
</optgroup>
</select>
<label for="age">Year of Birth:</label>
<select name="age" id="age">
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option selected="selected">2015</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>
Explanation:
In the above example, we are displaying the functionality of the Selectmenu.
The various options that can be used with this method are listed below:
Option |
Uses |
| appendTo | To append the menu. The default value is NULL. |
| disabled | To disable the Selectmenu, when set to true. The default value is FALSE. |
| icons | To specify a button. |
| position | To determine the position of the menu with the associated button element. |
| width | To define the width of the menu in pixels. The default value is NULL. |
To initialize the Selectmenu with the disabled options specified:
Example:
$( ".selector" ).selectmenu({
disabled: true
});
We can use the “disable” option in two ways:
Get the disable option:
var disabled = $( “.selector” ).selectmenu( “option”, “disabled” );
Set the disable option:
$( “.selector” ).selectmenu( “option”, “disabled”, true );
Example 2:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="https:/resources/demos/style.css">
<script>
$(function() {
( "#subject" ).selectmenu().selectmenu( "option", "disabled", true);;
$( "#age" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
</script>
<style>
fieldset {
border: 2px solid brown;
}
label {
display: block;
margin: 20px 0 0 0;
}
select {
width: 300px;
}
.overflow {
height: 180px;
}
</style>
</head>
<body>
<div class="demo">
<form action="#">
<fieldset>
<label for="degree">Degree:</label>
<select name="degree" id="degree">
<option selected="selected">Engineering</option>
<option>Medical</option>
<option>Accounting</option>
<option>Marketing</option>
<option>Teaching</option>
</select>
<label for="subject">Subject Brochure:</label>
<select name="subject" id="subject">
<optgroup label="Scripts">
<option value="Mathematics">Mathematics.pdf</option>
<option value="Biology">Biology.pdf</option>
</optgroup>
<optgroup label="Others">
<option value="science">Science.pdf</option>
<option value="arts">Arts.pdf</option>
</optgroup>
</select>
<label for="age">Year of Birth:</label>
<select name="age" id="age">
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option selected="selected">2015</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>
Explanation:
In the above example, we are using the set method to display the usage of the jQuery UI Selectmenu.
The various actions or methods that can be used with this method are listed below:
Action |
Uses |
close |
To close the menu. No argument is accepted by this method. |
destroy |
To eliminate the Selectmenu functionality, thus returning the element to its pre-init state. No argument is accepted by this method. |
disable |
To disable the Selectmenu functionality. No argument is accepted by this method. |
enable |
To enable the Selectmenu. No argument is accepted by this method. |
instance |
To get the instance object of Selectmenu. No argument is accepted by this method. |
menuWidget |
To retrieve the jQuery object containing the menu element. No argument is accepted by this method. |
open |
To open the menu. No argument is accepted by this method. |
option |
To retrieve an object having the key/value pairs specifying the current Selectmenu options hash. |
refresh |
To parse the original element and re-render the menu. No argument is accepted by this method. |
widget |
To retrieve a jQuery object having the button element. |
