jQuery select 选项按值排序|极客教程

jQuery select 选项按值排序

在使用 jQuery 的时候，经常会遇到需要对 select 元素的选项按照值进行排序的需求。这在很多场景下都是很有用的，比如在表单中选择省份或者城市时，希望能够按照字母顺序或者其他方式来排序选项。

本文将详细介绍如何使用 jQuery 来实现对 select 元素的选项按值进行排序的功能。

准备工作

在开始之前，我们先准备一个简单的 HTML 页面，包含一个 select 元素和一个按钮，用来触发排序操作。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Select Options Sorting</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<select id="mySelect">
  <option value="c">C</option>
  <option value="a">A</option>
  <option value="b">B</option>
</select>

<button id="sortButton">Sort Options</button>

<script>
  // Sorting logic will go here
</script>

</body>
</html>

在这个基础上，我们将使用 jQuery 来实现选项排序的功能。

实现选项排序

首先，我们需要使用 jQuery 来捕获点击按钮事件，当点击按钮时触发排序逻辑。我们可以在 <script> 标签中添加以下代码：

$(document).ready(function() {
  $('#sortButton').click(function() {
    var options = $('#mySelect option');
    options.sort(function(a, b) {
      return a.value.localeCompare(b.value);
    });
    $('#mySelect').empty().append(options);
  });
});

在这段代码中，我们首先通过 $('#sortButton').click() 来捕获按钮的点击事件。然后，我们获取了 select 元素中的所有 option 元素，并使用 sort() 方法对其进行排序。在 sort() 方法中，我们使用 localeCompare() 方法来比较 option 的值，并按照字母顺序进行排序。

最后，我们通过 $('#mySelect').empty().append(options) 来清空原有的选项，并将排序后的选项重新添加到 select 元素中。

完整代码

将以上代码完整组合在一起，我们得到以下完整的 HTML 页面代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Select Options Sorting</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<select id="mySelect">
  <option value="c">C</option>
  <option value="a">A</option>
  <option value="b">B</option>
</select>

<button id="sortButton">Sort Options</button>

<script>
 $(document).ready(function() {$ ('#sortButton').click(function() {
    var options =  $('#mySelect option'); options.sort(function(a, b) { return a.value.localeCompare(b.value); });$ ('#mySelect').empty().append(options);
  });
});
</script>

</body>
</html>