How to get values of Semantic UI multiple select dropdown in the order chosen by user?-CodePudding

I am using the Semantic UI multiple search selection dropdown within an html dialog in an Apps Script project. It works perfectly but I can only get the values to return in alphabetical order.

I have found two ways to get the values:

Using <form> tag
Using the .dropdown("get value") method as shown in the documentation

Both output alphabetically, not in the order that the user selected them.
[This picture shows an example of a user selection.]

It outputs as Chinese, Hmong, and Spanish but I need it to come out as Hmong, Spanish, and Chinese.

<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  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>

This is using the .dropdown("get value")

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

This is using the <form> tag

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

I've also tried the .dropdown("get text") in place of "get values" but it returns nothing. Everything I can find online discusses how to get an array of values but nothing about how to get them in the user-defined order.

CodePudding user response：

I believe your goal is as follows.

You want to retrieve the selected values in order.

In this case, how about the following modification? In this modification, I used onChange of the built-in actions. When this is reflected in your script, it becomes as follows.

Modified script:

From:

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

To:

<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>

In this modification, the same value is returned for both buttons. So, please modify this for your actual situation.
And, in this modification, even when the selected values are removed, the order of values is kept.

Testing:

Also, you can test this modification at jsfiddle.net as follows.

https://jsfiddle.net/dm7ubyst/

Reference:

Specifying Select Action