当希望在回显 <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=)