# jQuery Selectable full (ok)

![](/files/-MSSLHUw_yy6FT1AWskW)

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

![](/files/-MSSMJrR3UeB4ktnamjs)

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**

![](/files/-MSSNtr81jBRrDul8ffd)

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;

![](/files/-MST8sMxMXm2q6cXd-QE)

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**

![](/files/-MSTAEwGlPeyqqlkaEsk)

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>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/jquery-selectable-full-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
