Select dependent textarea or textbox

Question

Hello guys I’m a beginner in the area and I need to make a textarea or textbox dependent on a select (Reason field) that is every time you select an iten from the list it fills the textarea or textbox field ( Action field) with the dependent answer ( I’m using javascrip and html) loading the data from a spreadsheet Sheets ( large list) for dependency I did in list form as below and it makes the dependency but I do not want the Acao field in list but textbox but when I switch to textbox it does not make the dependency with the Reason field. . can anyone guide me (help) ? Thank you

Html: Document.getElementById("Reason"). addeventlistener("input", List);

     function ListaAcao(){
   
           var comboAcao = document.getElementById("Acao");
           
           while (comboAcao.length){
               comboAcao.remove(0); 
           }
               
           var ListaAcao =  document.getElementById("Acao");                    
           var TextoAcao = "Escolha uma Ação"                   
           var NovaOpcaoAcao = document.createElement("option");
           var TextoNovaOpcaoAcao = document.createTextNode(TextoAcao);
               
           NovaOpcaoAcao.appendChild(TextoNovaOpcaoAcao);
               
           ListaAcao.insertBefore(NovaOpcaoAcao, ListaAcao.lastChild);
               
           document.getElementById("Acao").options[0].disabled = true;
           
           var Motivo =  document.getElementById("Motivo").value;
           
           google.script.run.withSuccessHandler(Carregar).Acao(Motivo);
        
          
            function Carregar(Acao){
   
               if (Acao != "MOTIVO NÃO ENCONTRADO"){
               
                   var ListaAcao =  document.getElementById("Acao");
                   
                       Acao.forEach(function(r){
                   
                            var TextoAcao = r[0];
                           
                            var NovaOpcaoAcao = document.createElement("option");
                            var TextoNovaOpcaoAcao = document.createTextNode(TextoAcao);
                           
                            NovaOpcaoAcao.appendChild(TextoNovaOpcaoAcao);
                           
                            ListaAcao.insertBefore(NovaOpcaoAcao, ListaAcao.lastChild); 
                       
                       });                                       
               }                             
            }           
      }

Javascript

Function Acao(Reason) {

var Spreadsheet = Spreadsheetapp.openByUrl(url); var Tab = Spreadsheet.getSheetByName("Lists"); var Localsearch = Guia.getRange(2, 27, 1, Guia.getLastColumn()). getValues()[0];

var Result = Localsearch.Search(Reason);

if (Result != -1){

var Column = Result + 27

Guia.getRange(3, Coluna). Activate(); getCurrentCell(). getNextDataCell(Spreadsheetapp.Direction.DOWN). Ctivate();

var Qtdlinha = Guia.getCurrentCell(). getRow(); var Qtdlinha = Qtdlinha - 2

var Data = getRange(3, Column, Qtdlinha). getValues();

Return Dados;

}Else{

Return 'REASON NOT FOUND'

}

}

Array.prototype.Search = Function(Search){

if (Search == "") Return false;

for ( var Line = 0; Line<this.length; Line ++)

if (this[Line] == Search) Line;

Return - 1

}

Answer 1

From what I understand you want to put a select and that when selecting an item of this select the autocomplete/Autofill of the textbox will put in the datalist certain values.

Js and then Html respectively

function change() {
    var select = document.getElementById("select").value
    document.getElementById("textbox").setAttribute('list', select)
    
}

<form>
    <select onchange="change()" name="select" id="select">
        <option value="valor1" selected>Valor 1</option> 
        <option value="valor2">Valor 2</option>
        <option value="valor3">Valor 3</option>
    </select>
    <input id="textbox" type="text" size="20" list="valor1">

    <datalist id="valor1">
        <option value="1.25"></option>
        <option value="1.5"></option>
        <option value="1.75"></option>
    </datalist>

    
    <datalist id="valor2">
        <option value="2.25"></option>
        <option value="2.5"></option>
        <option value="2.75"></option>
    </datalist>

    
    <datalist id="valor3">
        <option value="3.25"></option>
        <option value="3.5"></option>
        <option value="3.75"></option>
    </datalist>

</form>

In HTML you have the value of the options of select in the case are "valor1", "valor2" and "Valor3" I have already selected the "valor1" and you can notice that the list of input also comes with "valor1". I made 3 datalist with the values names of the options of the select to give less work when selecting the item, when changing the select it will execute the function change(), which will name the value of the select in a variable called select, after that it will take the attribute 'list' (to change the datalist) and will change to the value of the select ("value1", "value2"... which corresponds to the datalist ids), so I put the id of the datalists equal to the value of the select so it will automatically select the datalist corresponding to the value of the select.

I hope I’ve helped ;)