如何按用戶選擇的順序獲取語義 UI 多選下拉列表的值？

Question

我在 Apps 腳本項目的 html 對話框中使用語義 UI 多搜索選擇下拉菜單。 它工作得很好，但我只能讓值按字母順序返回。

我找到了兩種獲取值的方法：

使用<form>標簽
使用文檔中所示的 .dropdown("get value") 方法

兩者都按字母順序輸出，而不是按用戶選擇它們的順序。
[此圖顯示了用戶選擇的示例。]

它輸出為中文、苗語和西班牙語，但我需要它以苗語、西班牙語和中文輸出。

 <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> function usingFormTags() { google.script.run.getForm(document.forms[0]); } function passingAsVariable() { var data1 = $("#languages").dropdown("get value"); google.script.run.getData(data1); } </script></body></html>

這是使用 .dropdown("get value")

 function doGet(){ return HtmlService.createHtmlOutput("html");} function getData(data1){ Logger.log(data1)}

這是使用<form>標簽

 function doGet(){ return HtmlService.createHtmlOutput("html"); } function getForm(form) { var languages = form.languages Logger.log(languages)}

我也嘗試過 .dropdown("get text") 代替“get values”，但它什么也沒返回。 我可以在網上找到的所有內容都討論了如何獲取一組值，但沒有討論如何按照用戶定義的順序獲取它們。

Answer 1

我相信你的目標如下。

您想按順序檢索選定的值。

在這種情況下，如何進行以下修改？ 在此修改中，我使用了內置操作的onChange 。 當這反映在您的腳本中時，它變成如下。

修改后的腳本：

從：

<script>
function usingFormTags() {
      google.script.run.getForm(document.forms[0]);
      }
function passingAsVariable() {
      var data1 = $("#languages").dropdown("get value");
      google.script.run.getData(data1);
      }
</script>

至：

<script>
let ar = [];
$('#languages').dropdown({
  onChange: function (value) {
    const obj1 = ar.reduce((o, e) => (o[e] = true, o), {});
    const obj2 = value.reduce((o, e) => (o[e] = true, o), {});
    value.forEach(e => {
      if (!obj1[e]) ar.push(e);
    });
    ar.forEach(e => {
      if (!obj2[e]) ar.splice(ar.indexOf(e), 1);
    });
  }
});

function usingFormTags() {
  console.log(ar);
  google.script.run.getForm(ar);
}

function passingAsVariable() {
  console.log(ar);
  google.script.run.getData(ar);
}
</script>

在此修改中，兩個按鈕返回相同的值。 所以，請根據您的實際情況進行修改。
並且，在此修改中，即使刪除了選定的值，也會保留值的順序。

測試：

此外，您可以在 jsfiddle.net 上測試此修改，如下所示。

https://jsfiddle.net/dm7ubyst/

參考：

指定選擇動作

如何按用戶選擇的順序獲取語義 UI 多選下拉列表的值？

問題描述

1 個解決方案

解決方案1
0 已采納 2022-06-17 07:20:48

修改后的腳本：

從：

至：

測試：

參考：

如何按用戶選擇的順序獲取語義 UI 多選下拉列表的值？

問題描述

1 個解決方案

解決方案1 0 已采納 2022-06-17 07:20:48

修改后的腳本：

從：

至：

測試：

參考：

解決方案1
0 已采納 2022-06-17 07:20:48