當希望在回顯 <select> 元素的多選項時，已選中的選項靠前顯示，我們可以使用 JavaScript 對選項進行排序。以下是一個 HTML 和 JavaScript 示例，說明如何在回顯時将選中的選項排在前面：
<!DOCTYPE html>
<html>
<head>
<title>HTML Multi-select Re-display Example</title>
<script>
function restoreSelectedOptions() {
// 以逗号分隔的已選擇選項值的字元串，實際應用中可能從伺服器或本地存儲擷取
var selectedOptions = "option1,option3";
var selectedOptionsArray = selectedOptions.split(",");
// 擷取<select>元素
var selectElement = document.getElementById("options");
// 周遊選項并設定選中狀态
for (var i = 0; i < selectElement.options.length; i++) {
if (selectedOptionsArray.includes(selectElement.options[i].value)) {
selectElement.options[i].selected = true;
}
}
// 将選中的選項移動到前面
sortSelectedOptions(selectElement);
}
function sortSelectedOptions(selectElement) {
var options = Array.from(selectElement.options);
options.sort(function(a, b) {
if (a.selected && !b.selected) return -1;
if (!a.selected && b.selected) return 1;
return 0;
});
options.forEach(function(option) {
selectElement.appendChild(option);
});
}
</script>
</head>
<body onload="restoreSelectedOptions()">
<form>
<label for="options">選擇你的選項：</label>
<select id="options" name="options" multiple>
<option value="option1">選項 1</option>
<option value="option2">選項 2</option>
<option value="option3">選項 3</option>
<option value="option4">選項 4</option>
</select>
<input type="submit" value="送出">
</form>
</body>
</html>
在此示例中，我們添加了一個名為 sortSelectedOptions 的 JavaScript 函數，該函數接受一個 <select> 元素作為參數。該函數首先将選項清單轉換為數組，然後使用 Array.prototype.sort() 方法對選項進行排序。排序函數首先檢查選項的 selected 屬性，将選中的選項排在前面，未選中的選項排在後面。
最後，options.forEach 循環将排序後的選項重新添加到 <select> 元素中。
注意：此方法會更改選項的原始順序。如果你希望保留選項的原始順序，請在擷取選項值之前存儲它們的順序，并在需要時按原始順序恢複。
![Oracle通過case when條件判斷和instr字元串查找修改查詢結果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)