jQuery UI Selectmenu

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.