This article I will show you how you can Select Multiple
Item by Pressing Ctrl Button in Asp.Net using jQuery. In this
press Ctrl button and select and deselect item as you need.
Some of my previous articles are as follows: Auto Scroll While Dragging Item Using jQuery In Asp.Net MVC, jQuery Tabs Collapse Control Using jQuery In Asp.Net MVC, MVC2, MVC3, MVC4 and MVC5, jQuery Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC, jQuery Drag and Drop Item Functionality In Asp.Net MVC, jQuery Slider and Range Slider Plugins, Move ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net, Validate DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net.
Some of my previous articles are as follows: Auto Scroll While Dragging Item Using jQuery In Asp.Net MVC, jQuery Tabs Collapse Control Using jQuery In Asp.Net MVC, MVC2, MVC3, MVC4 and MVC5, jQuery Animated Dialog Window With Move, Resize and Explode Animation In Asp.Net MVC, jQuery Drag and Drop Item Functionality In Asp.Net MVC, jQuery Slider and Range Slider Plugins, Move ListBox Item From one ListBox To another ListBox Using jQuery In Asp.Net, Validate DropDownlist Selected Value Using jQuery In Asp.net ,C#.Net.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
In header of the page add the below code and css.
<style>
.fontsize {
font-size: 11px;
}
#countrylist .ui-selecting {
background: Red;
}
#countrylist .ui-selected {
background: green;
color: white;
}
#countrylist {
list-style-type: none;
margin: 0;
padding: 0;
width: 98%;
}
#countrylist li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
</style>
|
Have a look of the jQuery code.
<script>
$(function () {
$("#countrylist").selectable();
});
</script>
|
This code is responsible for performing the selection operation. In above code countrylist is the id of the UL control. Here is the complete code.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Code To
Select Multiple Item By Pressing Ctrl Button In Asp.Net</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<style>
.fontsize {
font-size: 11px;
}
#countrylist .ui-selecting {
background: Red;
}
#countrylist .ui-selected {
background: green;
color: white;
}
#countrylist {
list-style-type: none;
margin: 0;
padding: 0;
width: 98%;
}
#countrylist li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
}
</style>
<script>
$(function () {
$("#countrylist").selectable();
});
</script>
</head>
<body class="fontsize">
<ul id="countrylist">
<li class="ui-widget-content">India</li>
<li class="ui-widget-content">America</li>
<li class="ui-widget-content">Nepal</li>
<li class="ui-widget-content">Pakistan</li>
<li class="ui-widget-content">Itly</li>
</ul>
</body>
</html>
|
Now we have done run the application to check the output.
About the Author
0 comments:
Please let me know your view