HTML datalist array

Question

Please help me change path of the code so that the drop-down list changes when adding new elements to the array. I’ve been fighting this problem for half a day.Now I have to add manually each time. I tried to find the answer at SO, but all my attempts to change part of the code turned out to be a failure. It seems to me that I still do not understand the logic of HTML Thank you in advance!

js code part:

  t.DropdownList = (values); // loading every time before html starts

HTML code part:

   <div class="demo" >
   <style type="text/css"> .demo { margin: 30px ; color : grey ; font-family : 
   arial sans-serif ;font-size : 10pt } 
                            o { color : red ; font-size : 14pt } 
                            r { color : gray ; font-size : 14pt } 
   </style>

   <h1>Передача клиента:</h1> <br>
   <h1><?= ClientName ?></h1> <br>
   <r>Адрес:</r>
   <r><?= ClientAdress ?></r> <br>
   <r>Менеджер клиента:</r>
   <o><?= Manager ?></o> <br>
   <br>

   <form id='myForm'>

   <label for="managers-choice">Выберите менеджера для передачи клиента:</label>
   <input list="managers" id="dropdownlist" name="dropdownlist" />
   <input 


  onclick="google.script.run.Message02(document.getElementById('myForm'));myFuncti on();this.disabled=true" type="button" value="Передать" />

    </form>

    <datalist id="managers">
    <option value =<?=DropdownList[0]?> > // in this place I need help, because if the next load the array is shorter, then I will get an undefined result.
    <option value =<?=DropdownList[1]?> >
    <option value =<?=DropdownList[2]?> >
    <option value =<?=DropdownList[3]?> >
    <option value =<?=DropdownList[4]?> >
    <option value =<?=DropdownList[5]?> >
    </datalist>

    <script>
    $('#dropdownlist').datepicker({ dateFormat: 'dd.mm.yy' });

    function myFunction() {
      var b = document.getElementById('result');
      b.innerHTML = 'Менеджер выбран.';
      document.getElementById('dropdownlist').disabled = 'disabled';
      //alert('The output has been modified');
      return;
    }
    </script>

    <body>
    <div id="result">Вы еще не выбрали менеджера.</div>
    </body> 

    </div>

I think that you should start by reading some HTML introductory resources like https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics — Rubén, Jan 11 '20 at 21:36
Related (see the titles on the links section in the right panel of this page): https://stackoverflow.com/q/5641997/1595451, https://stackoverflow.com/q/1303416/1595451, https://stackoverflow.com/q/8249013/1595451 — Rubén, Jan 11 '20 at 21:41
i understand, my code is not perfect, but still it works. Unfortunately, my type of activity does not allow me to spend a lot of time studying, so I am moving forward in small steps. Now I just need help with the script part with the dropdownlist variable. — Vladimir Melnikov, Jan 11 '20 at 21:55
Thank you very much for the information, I will definitely read it! — Vladimir Melnikov, Jan 11 '20 at 21:58
Add a [mcve] (server side code `.gs` and client side code `.html`, and the execution transcript) — Rubén, Jan 11 '20 at 21:58
By the way, it looks like you are using jQuery. Do your html file include the code to load it? — Rubén, Jan 11 '20 at 22:02
I'm afraid I find it difficult to answer, but I laid out the HTML code completely. It seems to me that only my tenacity allows sheets to work :-). Special thanks to Cooper for his invaluable help! I try to learn a little every day from you guys! — Vladimir Melnikov, Jan 11 '20 at 22:11

Cooper · Answer 1 · 2020-01-11T22:09:42.290

1

Here's how I do it:

JavaScript:

 $(function(){
     google.script.run
     .withSuccessHandler(function(rObj){
       grObj=rObj;
       updateSelect(grObj.mnA);
     })
     .getRecipeList1();//google apps script function on server
    });
    function updateSelect(vA,id){
      var id=id || 'sel1';
      var select = document.getElementById(id);
      select.options.length = 0; 
      for(var i=0;i<vA.length;i++)
      {
        select.options[i] = new Option(vA[i],i);
      }
    }

So it always gets the latest list every time the page is loaded.

edited Jan 11 '20 at 22:09

answered Jan 11 '20 at 22:02

Cooper

59,616
6
23
54

I think that this answer should mention that the code included requires jQuery or something that declares `$` as a global object. – Rubén Jan 11 '20 at 22:03
As you have already pointed out it seems clear that the OP is already using JQuery so I think you've got it covered. Thanks. – Cooper Jan 11 '20 at 22:07
1

The array is updated every time the window starts, it seems to me a problem in my HTML code, in the datalist part. Added js code part above. – Vladimir Melnikov Jan 11 '20 at 22:18
There is no way to update the list from the server. The request must come from the client. – Cooper Jan 11 '20 at 22:32

HTML datalist array

1 Answers1