---
description: https://jqueryui.com/selectable
---

# jQuery Selectable full (ok)

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSSKr8tPTdqZX_21oUL%2F-MSSLHUw_yy6FT1AWskW%2FScreenshot_1.jpg?alt=media\&token=99654c58-e633-4b88-9d92-9b297b0df574)

**Bài toán 1: Khởi tạo selectable**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSSKr8tPTdqZX_21oUL%2F-MSSMJrR3UeB4ktnamjs%2FScreenshot_2.jpg?alt=media\&token=81a11d5c-7a65-4e07-8d62-6f52a34a851c)

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
  </ol>
  <script type="text/javascript">
    $(document).ready(function () {
      $( "#selectable" ).selectable();
    });
  </script>
  <style type="text/css">
    #selectable .ui-selecting { 
      background-color: #FECA40; 
    }
    #selectable .ui-selected { 
      background-color: #F39814; 
      color: white; 
    }
    #selectable { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      width: 60%; 
    }
    #selectable li { 
      margin: 3px; 
      padding: 0.4em;  
      height: 18px; 
    }
  </style>
</body>
</html>
```

**Bài toán 2: filter chỉ những select thỏa mãn điều kiện mới được kích hoạt**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSSMLhTe5C2HSam4tk8%2F-MSSNtr81jBRrDul8ffd%2FScreenshot_3.jpg?alt=media\&token=5bef815c-febc-4b1e-97fc-d6bc961e4584)

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
    <div class="ui-widget-content">Item 8</div>
  </ol>
  <script type="text/javascript">
    $(document).ready(function () {
      $( "#selectable" ).selectable({
        filter: "li"
      });
    });
  </script>
  <style type="text/css">
    #selectable .ui-selecting { 
      background-color: #FECA40; 
    }
    #selectable .ui-selected { 
      background-color: #F39814; 
      color: white; 
    }
    #selectable { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      width: 60%; 
    }
    #selectable li { 
      margin: 3px; 
      padding: 0.4em;  
      height: 18px; 
    }
  </style>
</body>
</html>
```

**Bài toán 3: Sự kiện start, selecting, stop bắt đầu, đang diễn ra, đã dừng**&#x20;

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MSSSjcGdedySAN0nLv3%2F-MST8sMxMXm2q6cXd-QE%2FScreenshot_4.jpg?alt=media\&token=f0fe8995-340c-49c9-89ed-d99086869d69)

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
  </ol>
  <script type="text/javascript">
    $(document).ready(function () {
      $( "#selectable" ).selectable({
        start: function ( event, ui ) {
          console.log('start');
        },
        selecting: function ( event, ui ) {
          console.log('selecting');
        },
        stop: function ( event, ui ) {
          console.log('stop');
        }
      });
    });
  </script>
  <style type="text/css">
    #selectable .ui-selecting { 
      background-color: #FECA40; 
    }
    #selectable .ui-selected { 
      background-color: #F39814; 
      color: white; 
    }
    #selectable { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      width: 60%; 
    }
    #selectable li { 
      margin: 3px; 
      padding: 0.4em;  
      height: 18px; 
    }
  </style>
</body>
</html>
```

**Bài toán 4: Sự kiện selected, unselecting, unselected Sự kiện đã chọn xong, sự kiện bắt đầu hủy chọn, sự kiện đã chọn xong**

![](https://2726517656-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M1E4Gk2ppVKb4olmnun%2F-MST8xQAg0GDkeIBCuTj%2F-MSTAEwGlPeyqqlkaEsk%2FScreenshot_5.jpg?alt=media\&token=03e96061-c097-4647-ae6d-0dc7811a1789)

C:\xampp\htdocs\php\index.php

```
<!doctype html>
<html lang="en">
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery Sortable</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <ol id="selectable">
    <li class="ui-widget-content">Item 1</li>
    <li class="ui-widget-content">Item 2</li>
    <li class="ui-widget-content">Item 3</li>
    <li class="ui-widget-content">Item 4</li>
    <li class="ui-widget-content">Item 5</li>
    <li class="ui-widget-content">Item 6</li>
    <li class="ui-widget-content">Item 7</li>
  </ol>
  <script type="text/javascript">
    $(document).ready(function () {
      $( "#selectable" ).selectable({
        selected: function( event, ui ) {
          console.log('Sự kiện đã chọn xong');
        },
        unselecting: function( event, ui ) {
          console.log('Sự kiện bắt đầu hủy chon');
        },
        unselected: function( event, ui ) {
          console.log('Sự kiện đã hủy chọn xong');
        }
      });
    });
  </script>
  <style type="text/css">
    #selectable .ui-selecting { 
      background-color: #FECA40; 
    }
    #selectable .ui-selected { 
      background-color: #F39814; 
      color: white; 
    }
    #selectable { 
      list-style-type: none; 
      margin: 0; 
      padding: 0; 
      width: 60%; 
    }
    #selectable li { 
      margin: 3px; 
      padding: 0.4em;  
      height: 18px; 
    }
  </style>
</body>
</html>
```
