0

I am building a ordering google sheets with custom appscript. I've constructed a way to choose which products are added to an order via a html form that is shown on top of the sheets. The problem that I'm facing is with getting the full list of values out of a dropdown.

The dropdown that I'm using right now is made with this github project: https://github.com/habibmhamadi/multi-select-tag

I'm able to get 1 of the options selected to print in the console (always the first one selected, so if options 3,4,5 are selected -> it prints 3, if 1,2,5 selected -> 1 is printed).

Here's my html form code and also the two buttons at the end are the options I've tried. First one gives 1 value, second one is always null.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Reserve calendar</title>
    <link rel="stylesheet" href="https://use.typekit.net/wrf4ljb.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/habibmhamadi/multi-select-tag/dist/css/multi-select-tag.css">
    <style>
        html{height:100%;display:flex;font-size:calc(max(2vw, .85em))}
        body{margin:auto;background:#fff;font-family:Cambria,Cochin,Georgia,Times,Times New Roman,serif}
    </style>
    <script src="https://cdn.jsdelivr.net/gh/habibmhamadi/multi-select-tag/dist/js/multi-select-tag.js"></script>
    <script>
        const getBikeChoices = (element) => google.script.run
            .withSuccessHandler(tulos => console.log('TULOS:', tulos))
            .getBikeFields(element)
    </script>
    </head>
<body> 
        <fieldset>
            <legend>Pyörien valinta</legend>
            <label for="bikes">Valitse pyörät:</label>
                <select name="Pyörät" id="bikes" size="5" multiple>
                    <option value="bike1" id="bike1">bike1</option>
                    <option value="bike2" id="bike2">bike2</option>
                    <option value="bike3" id="bike3">bike3</option>
                    <option value="bike4" id="bike4">bike4</option>
                    <option value="bike5" id="bike5">bike5</option>
                </select>
        <br>
        <button onclick="getBikeChoices(document.getElementById('bikes').value)">Valitse pyörät</button>
        <button onclick="getBikeChoices(document.getElementById('bikes')
            .addEventListener('change', function(e){
                const selectedVals = [...this.selectedOptions].map(o => o.value);
                return selectedVals
            }
          ))">Testi nappi</button>

    <script>
        new MultiSelectTag('bikes')
    </script>
 </body></html>

and here's my js code which is only inteded as a return function right now (will have more functionality after I get this problem fixed)

const getBikeFields = (element) =>{
    return element
}
FuzzyBooks
  • 1
  • 1
  • What steps have you taken to debug this? On your second button, *Testi nappi*, what do you get if you simply log `this.selectedOptions`? I'm wondering if, instead of `this`, you need `e.target`. – mykaf Aug 25 '23 at 13:46
  • @mykaf Good suggestion, I tried this: but this still gives only null through. Same with e.target. – FuzzyBooks Aug 25 '23 at 13:56
  • What does `getBikeChoices` return? This feels perhaps a little more complicated than it needs to be since you don't add the "change" function to the options until after you have clicked the button. Seems like it could be more straightforward, using *either* the button's onclick *or* the options' onchange, but not both. – mykaf Aug 25 '23 at 14:06

0 Answers0