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.

Example 1:

Option

Uses

To initialize the Selectmenu with the disabled options specified:

Example:

Example 2:

Action

Uses

close

destroy

disable

enable

instance

menuWidget

open

option

refresh

widget