jQuery Mobile Selectmenu option() Method
Last Updated :
20 Jan, 2022
jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops.
In this article, we will be using the jQuery Mobile Selectmenu option() method. Using this method, we can get, set or update any parameter’s value of the Selectmenu widget. We can also get all the options as key-value pairs using this method.
Syntax:
1. If we need any option’s value, pass the option name in the option(optionName) method. The optionName should be a string.
- optionName: It is the input that we need to pass in form of a string for which we need to get the value.
- return: We get the respective return based on the option data type.
var isDisabled = $( ".selector" ).selectmenu( "option", "disabled" );
2. Get all the options with their values as key-value pairs by just calling the option method with no parameters.
- input: We need to call the option method. Nothing should be passed as input.
- return: We get the list of key-value pairs of all the options as optionName - optionValue.
var options = $( ".selector" ).selectmenu( "option" );
3. Set the value of any option by calling the option(optionName, value) with the optionName and the value as parameters
- optionName: The option name is the first parameter, which is of string type.
- value: While calling the method, we need to pass the option’s value, which is of the object type.
$( ".selector" ).selectmenu( "option", "disabled", true );
4) To set multiple options instead of only one, call the option(options) method where options are the list of options.
- options: It is the map of the optionName-value pairs to set the options corresponding to the values passed, which is of the object type.
$( ".selector" ).selectmenu( "option", { disabled: true } );
CDN Link: First, add jQuery Mobile scripts needed for your project.
<link rel=”stylesheet” href=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css”><script src=”//code.jquery.com/jquery-3.2.1.min.js”></script>
<script src=”//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js”></script>
Example: This example describes the jQuery Mobile Selectmenu option() method.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content=
"width=device-width, initial-scale=1">
<link rel="stylesheet"
href=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.css">
<script src=
"//code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src=
"//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js">
</script>
<style>
.highlight {
border: 5px solid green;
}
</style>
</head>
<body>
<center>
<div data-role="page">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>jQuery Mobile Selectmenu option() Method</h3>
<div role="main" class="ui-content">
<label for="GFG" class="select">
GeeksforGeeks Courses:
</label>
<select name="GFG" id="GFG">
<option value="C">C Programming</option>
<option value="CPP">C++ Programming</option>
<option value="JAVA">Java Programming</option>
<option value="overnight">Python Programming</option>
<option value="WEB">Web Development</option>
</select>
</div>
<input type="button" id="Button" value="Get the value">
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).ready(function () {
$("#Button").on('click', function () {
var a = $("#GFG").selectmenu("option", "disabled");
$("#log").html('The value is: ' + a);
});
});
});
</script>
</body>
</html>
Output:
Reference: https://api.jquerymobile.com/selectmenu/#method-option
Similar Reads
jQuery Mobile Selectmenu open() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Selectmenu open() method. Using this method, we can open the closed select custom menu. Syntax: $( ".selector" )
2 min read
jQuery Mobile Slider option() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Slider option() method. Using this method, we can get, set or update any parameter’s value of the Slider widget.
3 min read
jQuery Mobile Textinput option() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Textinput option() method. Using this method, we can get, set or update any parameter’s value of the Textinput w
3 min read
jQuery Mobile Selectmenu icon Option jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Selectmenu icon option for replacing the default icon "carat-d" with an icon from the icon set. When the value o
2 min read
jQuery Mobile Selectmenu close() Method jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be using the jQuery Mobile Selectmenu close() method. Using this method, we can close the opened select custom menu. Syntax: $( ".selector"
2 min read