Updated June 8, 2023
Introduction to jQuery UI Selectable
The jQuery UI selectable is used to select single or multiple DOM elements. The jQuery UI selectable() method is a built-in function in the jQuery UI library. The jQuery UI selectable() method allows selecting one element or multiple elements in a group by clicking on an individual element or dragging the mouse over the group of elements respectively. The ctrl button also can be used to select multiple elements.
Syntax
There are two ways to use the selectable() method:
$(selector, context).selectable(options)Explanation: This is the first method that declares the specific HTML element contains selectable items. The options parameter specifies an appearance and the behavior of the selectable items. If the options are more than one, then this method can be used and each option should be separated by using the comma as below:
object.$(selector, context).selectable({opt1 : value1, opt2 : value2 ... });OR
$(selector, context).selectable("action", params)Explanation: This is the second method that declares an HTML element as a selectable element and performs an action on that selectable element. The action to be performed is passing as a string disable, enable, destroy the selectable element.
Parameters
Following are the parameters given below:
1. options
In the first method $(selector, context).selectable(options), it accepts only one parameter that is an option. There is a list of possible values which we can use for the option are:
- disabled: This option disables or deactivates the selection by setting it to true. The default value of it is false.
- appendTo: This option specify the element whose selection helper is to be appended. The default value of it is the body.
- autoRefresh: This option at the start of each select operation refreshes the size and position by set it to true. The default value of it is true.
- cancel: This option prevents the specific elements from start selection by clicking on it. The default value of it is input, button, textarea, option, select.
- delay: This option specify the delay before the element gets selected in a millisecond and can be used to prevent unwanted selection. The default value of it is 0.
- distance: This option sets the distance in pixels the mouse pointer move with the button pressed as the selection in progress. It can be used to prevent simple clicks from being interpreted as a group selection. The default value of it is 0.
- filter: This option specifies to filter the selector with it. The default value of it is *.
- tolerance: It defines which mode to be used for testing the selection helper should select an item. The default value of it is touch.
2. action
In the second method $(selector, context). selectable(“action”, params), it accepts the two parameters, the action, and params. The action parameter specifics the action to be performed on those selectable elements. The possible values for the action are:
- destroy: It is used to destroy or remove the functionality of the selectable element and return to original state. It doesn’t accept any parameters.
- refresh: It is used to refresh the selectable It doesn’t accept any parameters.
- disable: It is used to disable the functionality of the selectable It doesn’t accept any parameters.
- enable: It is used to enable the functionality of the selectable It doesn’t accept any parameters.
- option(optName): It is used to get the value of the specified option as optName which is a string.
- option(): It is used to get a current object containing key-value pairs of current selectable options.
- option(optName, value): It is uses to set selectable option of the passing optName.
- option(options): It is used to set one or multiple selectable options in the form of option-value pairs map.
- widget: It is used to get an object which contains the selectable It doesn’t accept any parameters.
Examples to Implement jQuery UI selectable() method
Below are some examples mentioned:
Example #1
Next, we write the HTML code to understand the jQuery selectable() method more clearly with the following example, where the selectable() method used to treat HTML elements as the selectable element without passing any parameters to the selectable() method, as below:
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI selectable() method</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#sel1" ).selectable();
});
</script>
<style>
#sel1 .ui-selecting { background: pink ; }
#sel1 .ui-selected { background: red; color: #000000; }
#sel1 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#sel1 li { margin: 2px; padding: 0.6em;
font-size: 16px; height: 18px; }
.ui-widget-content {
border: o.5px solid #DDDDDD;
color: #8b0a58;
}
</style> </head>
<body>
<h1> Welcome to vegetables and fruits shop </h1>
<h2> Select a vegetables</h2>
<ol name="vegetables" id="sel1">
<li class="ui-widget-content">Cabbage</li>
<li class="ui-widget-content">Cauliflower</li>
<li class="ui-widget-content">Onions</li>
<li class="ui-widget-content">Broccoli</li>
<li class="ui-widget-content">Carrot</li>
<ol label="greens">Greens
<li class="ui-widget-content" value="spinach">Spinach</li>
<li class="ui-widget-content" value="mustard greens">Mustard greens</li>
</ol>
</ol>
<h2>Select a fruits</h2>
<select name="fruits" id="sel1">
<option class="ui-widget-content">Apple</option>
<option class="ui-widget-content">Banana</option>
<option class="ui-widget-content" selected="selected">Orange</option>
<option class="ui-widget-content">Grapes</option>
<option class="ui-widget-content">Melons</option>
</select>
</body>
</html>Output:
Once we click on the item, the item gets selected and the output is:
Example #2
Next, we write the HTML code to understand the jQuery selectable() method where the selectable() method uses options like delay and distance, as below:
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI selectable() method</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#sel1" ).selectable({
delay : 1500 ,
distance : 150
});
});
</script>
<style>
#sel1 .ui-selecting { background: pink ; }
#sel1 .ui-selected { background: red; color: #000000; }
#sel1 { list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#sel1 li { margin: 2px; padding: 0.6em;
font-size: 16px; height: 18px; }
.ui-widget-content {
border: o.5px solid #DDDDDD;
color: #8b0a58;
}
</style> </head>
<body>
<h1> Welcome to vegetables shop </h1>
<h2> Select a vegetables(with delay 1500 ms and distance 150 px) </h2>
<ol name="vegetables" id="sel1">
<li class="ui-widget-content">Cabbage</li>
<li class="ui-widget-content">Cauliflower</li>
<li class="ui-widget-content">Onions</li>
<li class="ui-widget-content">Broccoli</li>
<li class="ui-widget-content">Carrot</li>
<ol label="greens">Greens
<li class="ui-widget-content" value="spinach">Spinach</li>
<li class="ui-widget-content" value="mustard greens">Mustard greens</li>
</ol>
</ol>
</body>
</html>Output:
Example #3
Next, we write the HTML code to understand the jQuery selectable() method where the selectable() method use the disable action, as below:
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI selectable() method</title>
<link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#sel1" ).selectable();
$( "#sel1" ).selectable('disable');
});
</script>
<style>
#sel1 .ui-selecting { background: pink ; }
#sel1 .ui-selected { background: red; color: #000000; }
#sel1 {list-style-type: none; margin: 0;
padding: 0; width: 20%; }
#sel1 li { margin: 2px; padding: 0.6em;
font-size: 16px; height: 18px; }
.ui-widget-content {
border: o.5px solid #DDDDDD;
color: #8b0a58;
}
</style> </head>
<body>
<h1> Welcome to vegetables shop </h1>
<h2> Select a vegetables </h2>
<ol name="vegetables" id="sel1">
<li class="ui-widget-content">Cabbage</li>
<li class="ui-widget-content">Cauliflower</li>
<li class="ui-widget-content">Onions</li>
<li class="ui-widget-content">Broccoli</li>
<li class="ui-widget-content">Carrot</li>
<ol label="greens">Greens
<li class="ui-widget-content" value="spinach">Spinach</li>
<li class="ui-widget-content" value="mustard greens">Mustard greens</li>
</ol>
</ol>
</body>
</html>Output:
Conclusion
The jQuery UI selectable() method is a built-in method in jQuery UI library which is used to select single or multiple elements by clicking and dragging over the elements respectively.
Recommended Articles
This is a guide to jQuery UI Selectable. Here we discuss an introduction to jQuery UI Selectable, with appropriate syntax and respective programming examples. You can also go through our other related articles to learn more –
