Javascript Select2 Sortable

在编写Web应用程序时，常常需要进行数据的筛选、搜索和排序。Select2是一个流行的javascript库，提供了强大的拓展筛选、搜索和排序功能。另一方面，SortableJS是另外一个流行的javascript库，提供了方便的拖放和重新排序功能。将这两个库结合起来，就能够非常方便地实现带有拖放与排序功能的Select2下拉菜单。

什么是Select2？

• 官网地址：https://select2.org/
• Github地址：https://github.com/select2/select2

Select2是一个开源的JavaScript库，提供了一个更好的用户界面（UI），可以让用户轻松地搜索和选择来自下拉列表的选项。它可以处理远程数据集，支持无限滚动，自定义模板和自定义事件，这让Select2非常适合在复杂的应用程序中使用。

以下是一个基本的例子，展示如何使用Select2库：

<!-- 引入Select2库的CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- 引入Select2库的JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<!-- HTML中定义Select2下拉框 -->
<select id="mySelect">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
</select>

<!-- 使用jQuery初始化Select2下拉框 -->
<script>
  $(document).ready(function() {
    $('#mySelect').select2();
  });
</script>

这段代码会在页面上创建一个Select2下拉框，当用户点击下拉框，会出现一个搜索框，让用户可以输入搜索关键字，并从选项中进行选择。

什么是SortableJS？

• 官网地址：https://sortablejs.github.io/Sortable/
• Github地址：https://github.com/SortableJS/Sortable

SortableJS是一个轻量级的JavaScript库，提供了可拖放和重新排序的列表，使用户更容易进行排序操作。SortableJS非常易于使用和自定义，而且在大多数Web浏览器中都有良好的兼容性。

以下是一个基本的例子，展示如何使用SortableJS库：

<!-- 引入SortableJS库的JS -->
<script src="https://sortablejs.github.io/Sortable/Sortable.js"></script>

<!-- HTML中定义需要排序的列表 -->
<ul id="myList">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
  <li id="item4">Item 4</li>
  <li id="item5">Item 5</li>
</ul>

<!-- 使用SortableJS初始化列表 -->
<script>
  var myList = document.getElementById("myList");
  new Sortable(myList);
</script>

这段代码会在页面上创建一个列表，用户可以使用鼠标拖动其中的项目，从而重新排序项目。

如何结合使用Select2和SortableJS？

可以将Select2下拉框与SortableJS列表进行结合，创建一个带有拖放和排序功能的下拉菜单。以下是一个基本的例子，展示如何结合使用Select2和SortableJS：

<!-- 引入Select2库的CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- 引入SortableJS库的CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.css" rel="stylesheet" />

<!-- 引入Select2库的JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<!-- 引入SortableJS库的JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>

<!-- HTML中定义Select2下拉框 -->
<select id="mySelect">
  <option value="item1">Item 1</option>
  <option value="item2">Item 2</option>
  <option value="item3">Item 3</option>
  <option value="item4">Item 4</option>
</select>

<!-- HTML中定义SortableJS可拖放的列表 -->
<ul id="myList">
  <li id="item1">Item 1</li>
  <li id="item2">Item 2</li>
  <li id="item3">Item 3</li>
  <li id="item4">Item 4</li>
</ul>

<!-- 使用jQuery初始化Select2下拉框和SortableJS可拖放的列表 -->
<script>
  $(document).ready(function() {
    $('#mySelect').select2();
    new Sortable(myList, {
      onSort: function(evt) {
        $('#mySelect').append($("#" + evt.item.id));
      }
    });
  });
</script>

这段代码会在页面上创建一个Select2下拉框和一个可拖放和重新排序的列表。当用户拖放列表中的项目时，Select2下拉框的选项会随着列表的重新排序而进行调整。

小结

结合Select2和SortableJS，可以创建一个非常强大和方便的下拉菜单，让用户可以轻松地进行筛选、搜索和排序。两个库的API都非常易于使用和扩展，只要您有一点JavaScript编程经验，就可以轻松地实现以各种方式进行搜索和排序的Select2列表。