Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

jQuery selectable widget

Suggested Videos
Part 94 - jquery droppable widget
Part 95 - Customizing droppable widget
Part 96 - jQuery Resizable Widget

In this video we will discuss jQuery selectable widget

jQuery selectable widget allows us to select elements, individually or in a group using the mouse. Let us understand this with an example. 

The user should be able to select the days he or she is available
jquery selectable example

Here is the example code used in the demo
<%@ Page Language="C#" AutoEventWireup="true"
    CodeBehind="WebForm1.aspx.cs" Inherits="Demo.WebForm1" %>

<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <link href="jquery-ui.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
                stop: function () {
                    var result = '';
                    $('.ui-selected').each(function () {
                        result += $(this).text() + '<br/>';

            border:1px solid black;
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <ul id="selectable">
        You selected : <div id="result"></div>

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.