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" ).selectmenu( "open" );
Parameter: This method does not accept any parameters.
Return Value: This method does not return any values.
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 open() method.
<!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 open() Method</h3>
<div role="main" class="ui-content">
<label for="GFG" class="select">
GeeksforGeeks Courses:
</label>
<select name="GFG" id="GFG" data-native-menu="false">
<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="Open the Selectmenu">
<div id="log"></div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).on("mobileinit", function () {
$.mobile.selectmenu.prototype.options.nativeMenu = false;
});
$("#Button").on('click', function () {
$("#GFG").selectmenu("open");
});
});
</script>
</body>
</html>
|
Output:
Reference: https://api.jquerymobile.com/selectmenu/#method-open