jQuery UI is a web-based technology and consists of various GUI widgets, visual effects, and themes. These features can be implemented using the jQuery JavaScript Library. jQuery UI is the best tool for building UI interfaces for the webpages. It can also be used to build highly interactive web applications or can be used to add widgets easily.
In this article, we will be using the jQuery Mobile Filterable option() Method to refresh the sortable items. It riggers the reloading of all sortable items and allow new items to be recognized.
Syntax:
1. If the user wants any option’s value, the option name should be passed in the option(optionName) method. The optionName should be a string type.
var isEnhanced = $("Selector").filterable("option", "enhanced");Parameter:
- optionName: This parameter is the input that we need to pass in the form of a string for which we need to get the value.
- Return type: We get the respective return value based on the option data type.
2. To get all the options as the key-value pairs, you just need to call the option() method with no parameter is passed to the method.
var options= $("Selector").filterable("option");Parameter:
- Return type: This method returns the list of key-value pairs of all the options as optionName-optionValue pairs set.
3. To set the value of any option, you just need to call the option(optionName, value) with the optionName and the value as the parameters.
$("Selector").filterable("option", "enhanced", "false");Parameters:
- optionName: The option method required the option name as the first parameter and this parameter is of string type.
- value: The option method required the option’s name as the second parameter and this parameter is of string type.
4. We can also set multiple options instead of only one, you just need to call the option(options) method where options are the list of options.
$("Selector").filterable("option", {enhanced: false, disabled: true});Parameter:
- option: It is the map of the optionName-value pairs as input to set the options corresponding to the values passed, which is of the object type.
- Return Value: This method returns an object value.
CDN Link: Below are some jQuery Mobile scripts that will be needed for your project so add these to your project.
<link rel=”stylesheet” href=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” />
<script src=”https://code.jquery.com/jquery-1.11.1.min.js”></script>
<script src=”https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”></script>
Example: This example describes the uses of the jQuery Mobile Filterable option() 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=
<script src=
</script>
<script src=
</script>
<script>
$(document).ready(function () {
$(".items").filterable({});
// Bind the click event for the button
$(".btnclass").bind("click", function () {
var options = $(".items").filterable("option");
$("#gfg").html("<b>"
+ "No of key/value pair present : "
+ Object.keys(options).length + "<b>");
});
});
</script>
</head>
<body>
<center>
<div data-role="page" id="page1">
<div>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
jQuery Mobile Filterable option() Method
</h3>
</div>
<div role="main" class="ui-content">
<div>
<ul class="items" style="list-style-type:none;">
<li>
<a href=
target="_blank">
Data Structures
</a>
</li>
<li>
<a href=
target="_blank">
Interview preparation
</a>
</li>
<li>
<a href=
target="_blank">
Java Programming
</a>
</li>
</ul>
</div>
</div>
<input type="button" Value="Button" class="btnclass" />
<div id="gfg"></div>
</div>
</center>
</body>
</html>
|
Output:
jQuery Mobile Filterable option() Method
Reference: https://api.jquerymobile.com/filterable/#method-option