Updated May 18, 2023
Introduction to jQuery UI Selectmenu
The jQuery UI select menu extends and provides customizable functionality in the behavior and appearance of the native HTML special element. The jQuery UI select menu () function is a built-in function in the jQuery UI library. The jQuery UI select menu () function allows duplicates. It extends the functionality of the select element of the HTML beyond its limitations. Hence, it acts as a proper replacement of the select element, and the widget functions as a proxy to the original select element, and therefore an original select element’s state controls for submission and serialization. Hence select menu () transform the select element into themeable and customizable control.
Syntax
The syntax of the JQuery UI selectmenu( ) method:
$("#menu").selectmenu();OR
$("#menu").selectmenu(options);OR
$("#menu").selectmenu("action", params);Parameters of jQuery UI Selectmenu
1. options: In the second method $(“#menu”).selectmenu(options), it accept only one parameter that is option. There is a list of possible values that we can use for the option are:
- Disabled: This option disables or deactivates the select menu by setting it to true. The default value of it is false.
- appendTo: This option append the menu. The default value of it is
- icons: This option sets icons to be displayed on the button.
- Position: This option sets the position of the menu about the button element.
- Width: This option sets the width of the menu in pixels. The default value of it is NULL.
2. action:In the third method, $(“#menu”).selectmenu(“action,” params), it accepts the parameter action. The action parameter specifics the action to be performed on that select menu. The possible values for the action are:
- Close: This action specifies closing the menu. It doesn’t accept any parameters.
- Destroy: The selectmenu() method, without any parameters, can be used to destroy or remove the functionality of the select menu element, returning it to its original state.
- Disabled: The selectmenu() method, without any parameters, is utilized to disable the functionality of the select menu element.
- Enable: The selectmenu() method, without any parameters, is employed to enable the functionality of the select menu element.
- Instance: Selectmen’s selectmenu() method can be used without any parameters to get an instance object of Selectmen.
- Menu widget: To receive an object that contains the menu element, use the selectmenu() function alone, without any further parameters.
- Refresh: To get back to the previous state and re-render the menu, use the selectmenu() method. There are no parameters that it accepts.
- Widget: To get an object with the button element, use the selectmenu() method. There are no parameters that it accepts.
Examples to Implement jQuery UI select menu() method
Let us see the examples mentioned:
Example #1
To gain a clearer understanding of the jQuery UI selectmenu() method, let’s examine the following example. In this example, we write HTML code where the selectmenu() method is utilized to treat HTML elements as select elements without passing any parameters to the method:
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI selectmenu() method</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.educba.com/resources/demos/style.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#vegetables" ).selectmenu();
$( "#fruits" ).selectmenu();
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
</script>
<style>
fieldset {
border: 10;
}
label {
color: green;
display: block;
margin: 40px 0 0 0;
}
select {
width: 250px;
height: 50px;
}
.overflow {
height: 200px;
}
</style>
</head>
<body>
<div>
<form action="#">
<fieldset>
<h1 color="red"> Welcome to vegetables and fruits shop </h1>
<label for="vegetables">Select a vegetables</label>
<select name="vegetables" id="vegetables">
<option>cabbage</option>
<option>cauliflower</option>
<option selected="selected">onions</option>
<option>broccoli</option>
<option>carrot</option>
<optgroup label="greens">
<option value="spinach">spinach</option>
<option value="mustard greens">mustard greens</option>
</optgroup>
</select>
<label for="number">Select a Quantity</label>
<select name="number" id="number">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<label for="fruits">Select a fruits</label>
<select name="fruits" id="fruits">
<option>Apple</option>
<option>Banana</option>
<option selected="selected">Orange</option>
<option>Grapes</option>
<option>Melons</option>
</select>
<label for="number">Select a Quantity</label>
<select name="number" id="number">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>Output:
Example #2
Next, we write the HTML code to understand the jQuery selectmenu() method where the selectmenu() method uses options like disabled, as below:
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> This is an example for jQuery UI selectmenu() method </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() {
$( "#vegetables" ).selectmenu();
$( "#fruits" ).selectmenu().selectmenu( "option", "disabled", true );;
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
</script>
<style>
fieldset {
border: 10;
}
label {
color: green;
display: block;
margin: 40px 0 0 0;
}
select {
width: 250px;
height: 50px;
}
.overflow {
height: 200px;
}
</style>
</head>
<body>
<div>
<form action="#">
<fieldset>
<h1> Welcome to vegetables and fruits shop </h1>
<label for="vegetables">Select a vegetables</label>
<select name="vegetables" id="vegetables">
<option>cabbage</option>
<option>cauliflower</option>
<option selected="selected">onions</option>
<option>broccoli</option>
<option>carrot</option>
<optgroup label="greens">
<option value="spinach">spinach</option>
<option value="mustard greens">mustard greens</option>
</optgroup>
</select>
<label for="number">Select a Quantity</label>
<select name="number" id="number">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<label for="fruits">Select a fruits</label>
<select name="fruits" id="fruits">
<option>Apple</option>
<option>Banana</option>
<option selected="selected">Orange</option>
<option>Grapes</option>
<option>Melons</option>
</select>
<label for="number">Select a Quantity</label>
<select name="number" id="number">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>Output:
Example #3
Next, we write the HTML code to understand the jQuery selectmenu() method where the selectmenu() method uses actions like open, as below:
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> This is an example for jQuery UI selectmenu() method </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() {
$( "#vegetables" ).selectmenu();
$( "#fruits" ).selectmenu().selectmenu("open");;
$( "#number" )
.selectmenu()
.selectmenu( "menuWidget" )
.addClass( "overflow" );
});
</script>
<style>
fieldset {
border: 10;
}
label {
color: green;
display: block;
margin: 40px 0 0 0;
}
select {
width: 250px;
height: 50px;
}
.overflow {
height: 200px;
}
</style>
</head>
<body>
<div>
<form action="#">
<fieldset>
<h1> Welcome to vegetables and fruits shop </h1>
<label for="vegetables">Select a vegetables</label>
<select name="vegetables" id="vegetables">
<option>cabbage</option>
<option>cauliflower</option>
<option selected="selected">onions</option>
<option>broccoli</option>
<option>carrot</option>
<optgroup label="greens">
<option value="spinach">spinach</option>
<option value="mustard greens">mustard greens</option>
</optgroup>
</select>
<label for="number">Select a Quantity</label>
<select name="number" id="number">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<label for="fruits">Select a fruits</label>
<select name="fruits" id="fruits">
<option>Apple</option>
<option>Banana</option>
<option selected="selected">Orange</option>
<option>Grapes</option>
<option>Melons</option>
</select>
<label for="number">Select a Quantity</label>
<select name="number" id="number">
<option selected="selected">1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</fieldset>
</form>
</div>
</body>
</html>Output:
Conclusion
The jQuery UI selectmenu() method extends and provides customizable functionality in the behavior and appearance of the native HTML select element.
Recommended Articles
We hope that this EDUCBA information on “jQuery UI Selectmenu” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
