資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何使用 jQuery 對 option 元素進行字母排序？
有時，我們需要按字母順序對下拉選單的選項進行排序。例如，您在網站上銷售電腦，並希望允許使用者根據型號選擇電腦。如果您的網站包含數百種不同品牌的型號，如果未排序，使用者將很難找到特定品牌的電腦。但是，您可以提供搜尋功能，但如果沒有，則按字母順序對所有選項元素進行排序會更好。
在這裡，我們將學習使用 jQuery 對下拉元素的所有選項進行排序的各種方法。
使用 jQuery 的 sort() 方法
sort() 方法允許我們根據特定條件對字串、數字或任何值進行排序。我們可以將比較器函式傳遞給 sort() 方法，該方法返回 0、-1 和 1。
語法
使用者可以按照以下語法對下拉列表的所有選項進行排序。
dorpdown.html(dorpdown.find('option').sort(function (option1, option2) {
return $(option1).text() < $(option2).text() ? -1 : 1;
});
在上述語法中，下拉列表是 <select> HTML 元素。我們使用 find() 方法查詢所有選項並應用 sort() 函式。
演算法
使用者可以按照以下演算法按字母順序對所有下拉選項進行排序。
步驟 1 − 透過 id 或標籤訪問 <select> 選單。
步驟 2 − 使用 html() 方法獲取 <select> 標籤的 HTML。
步驟 3 − 在 html() 方法的引數中，對所有 <option> 元素使用 find() 方法。
步驟 4 − 找到選項後，對所有選項應用 sort() 方法。
步驟 5 − 在 sort() 方法中，將回調比較器函式作為引數傳遞。
步驟 6 − 比較器函式將兩個選項作為引數，並按字母順序對它們進行排序。
步驟 7 − 從比較器函式中，根據兩個選項文字的字母順序返回 -1 或 1。我們可以使用 text() 方法獲取 <option> 元素的文字。
示例 1
在下面的示例中，我們使用 <select> 和 <option> 標籤建立了下拉選單。使用者可以看到其選項未按字母順序排列。
之後，在 jQuery 中，我們透過標籤名稱訪問了 <select> 選單並對所有選項元素進行排序。當用戶在輸出中單擊按鈕時，他們可以看到選項按字母順序顯示。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i>jQuery sort() method</i> to sort all option elements of the dropdown</h2>
<h3>Choose an option from the dropdown.</h3>
<select>
<option value = "Dell">Dell</option>
<option value = "Lenovo">Lenovo</option>
<option value = "MSI">MSI</option>
<option value = "Apple">Apple</option>
<option value = "HP">HP</option>
<option value = "Acer">Acer</option>
<option value = "Samsung">Samsung</option>
</select> <br> <br>
<button onclick = "sortOptions()"> Sort Options </button>
<script>
function sortOptions() {
var dorpdown = $('select');
dorpdown.html(dorpdown.find('option').sort(function (option1, option2) {
return $(option1).text() < $(option2).text() ? -1 : 1;
}));
}
</script>
</body>
</html>
示例 2
在此示例中，我們也使用 sort() 方法對下拉列表的所有選項進行排序。而不是訪問下拉選單，我們直接使用 jQuery 訪問了所有下拉選項。
之後，我們使用 sort() 方法根據其文字值（小寫）對所有選項元素進行排序。在輸出中，使用者可以看到，當他們單擊按鈕時，下拉列表中的所有汽車都將按字母順序排序。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"> </script>
</head>
<body>
<h2>Using the <i>jQuery sort() method</i> to sort all option elements of the dropdown</h2>
<p>Choose any option from the dropdwon.</p>
<select>
<option value = "BMW"> BMW </option>
<option value = "OD"> OD </option>
<option value = "Verna"> Verna </option>
<option value = "Honda City"> Honda City </option>
<option value = "Alto"> Alto </option>
<option value = "i20"> i20 </option>
<option value = "zen"> zen </option>
</select> <br> <br>
<button onclick = "sortOptions()"> Sort Options </button>
<script>
function sortOptions() {
var allOptions = $("select option");
allOptions.sort(function (op1, op2) {
var text1 = $(op1).text().toLowerCase();
var text2 = $(op2).text().toLowerCase();
return (text1 < text2) ? -1 : 1;
});
allOptions.appendTo("select");
}
</script>
</body>
</html>
在本教程中，我們看到了對所有下拉列表選項進行排序的兩個不同示例。在這兩個示例中，我們使用了不同的方法。在第一個示例中，我們使用 find() 方法獲取 <select> 元素的所有選項，而在第二種方法中，我們直接使用 jQuery 透過標籤名稱訪問所有選項。
6K+ 瀏覽量
