Search code examples
htmlgoogle-apps-scriptsemantic-ui

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

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:

  1. Using <form> tag
  2. 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.]
3
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 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>

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.

Solution

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