如何按用户选择顺序获取Semantic UI多选下拉框选中值

Semantic UI 2.x版本的多选下拉组件，内置取值逻辑默认按照<option>标签在DOM中的初始排列顺序返回选中值，不会记录用户选择操作的先后时序。无论是原生表单提交，还是调用组件自带的dropdown("get value")方法，都会遵循这个默认规则，因此返回结果和用户实际选择顺序不一致，你遇到的字母排序本质是选项本身在HTML里按字母顺序写在了前面。

示例场景：用户实际选择顺序为Hmong、Spanish、Chinese，组件默认返回结果为Chinese、Hmong、Spanish

你之前调用dropdown("get text")无返回，是因为该接口在多选模式下本身存在逻辑缺陷，无法正常返回结果，不需要在这个方法上继续尝试。

核心思路是绕开组件自带的取值逻辑，自行监听选择/取消选择事件，维护一个严格按照用户操作顺序存储选中值的数组，取值时直接读取该自定义数组即可。

前端代码修改 #

首先补全你原有代码缺失的jQuery、Semantic UI JS依赖（缺少这两个文件时dropdown方法本身无法正常执行），之后初始化下拉组件时绑定事件维护顺序数组：

<html>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet" />
<head><base target="_top"></head>
<body>
<form>
Translate to:
<select class="ui fluid search dropdown" multiple="" id='languages' name='languages'>
<option value='Chinese (Simplified)'>Chinese (Simplified)</option>
<option value='Hmong'>Hmong</option>
<option value='Spanish'>Spanish</option>
<option value='Arabic'>Arabic</option>
</select>
</form>
<button onclick='usingFormTags()'>Save Preferences</button>
<button onclick='passingAsVariable()'>Save Preferences</button>

<!-- 补全缺失的依赖 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<script>
// 全局数组，严格按用户选择顺序存储选中值
let selectedOrder = [];

// 页面加载完成后初始化下拉组件
$(document).ready(function() {
  $('#languages').dropdown({
    // 选中选项时触发
    onAdd: function(addedVal) {
      if (!selectedOrder.includes(addedVal)) {
        selectedOrder.push(addedVal);
      }
    },
    // 取消选中选项时触发
    onRemove: function(removedVal) {
      selectedOrder = selectedOrder.filter(val => val !== removedVal);
    },
    // 支持点击清空按钮重置顺序
    onClear: function() {
      selectedOrder = [];
    }
  });
});

// 原有提交方法修改为读取自定义顺序数组
function usingFormTags() {
  google.script.run.getForm(selectedOrder);
}

function passingAsVariable() {
  google.script.run.getData(selectedOrder);
}
</script>
</body>
</html>

服务端适配 #

服务端逻辑不需要额外调整，接收到的参数就是按照用户实际选择顺序排列的数组。比如用户依次选Hmong、Spanish、Chinese，服务端Logger打印的结果就是["Hmong", "Spanish", "Chinese"]，不会再出现按字母重排的问题。

注意事项 #

• 不要读取表单默认提交的languages字段值，原生多选表单的返回值永远按照option的初始DOM顺序排列，无法保留选择顺序
• 如果需要做已选值回显，初始化时可以把已保存的顺序数组赋值给selectedOrder，同时调用下拉组件的set selected方法设置选中项即可

内容的提问来源于stack exchange，提问作者lukeG