Gestione funzione in javascript in tabella richiamare"textarea" valori preimpostati in "select"

Discussione in 'Javascript' iniziata da psicomia, 9 Giugno 2019.

  1. psicomia

    psicomia Nuovo Utente

    Registrato:
    9 Giugno 2019
    Messaggi:
    3
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Femmina
    Buonasera, premetto che ho un po' di dimestichezza con html e css, non sono autonoma ma riesco a capirlo e reinterpretarlo, ma non so quasi nulla di javascript.
    Ho necessità di creare un mio modulo per poter gestire alcune informazioni e creazioni di contenuti, che nel tempo potrenno ritornarmi utili (unità didattiche di apprendimento, insegno alla primaria).
    Sono riuscita a compilare la prima parte del modulo, ma ora sono ferma sulla seconda parte del modulo.
    Vorrei creare una tabella dove nella prima cella delle righe inserirei il macro-argomento e nelle successive celle della riga di riferimento vorrei che in una textarea comparissero le oprzoni che ho già preimpostato e corrispondenti alla prima cella.
    Ho trovato una cosa simile online però agiscono tramite form e mettendole in tabella non funzionano.
    Posto il codice che ho trovato e sotto ci sarà l'impostazione grafica di quello che serve a me.
    Vi ringrazio in anticipo per l'eventuale aiuto!
    Ho ancora molto da imparare e spero di riuscire a gestire l'eventuale codice che mi suggerirete.
    Codice:
    <html>
      <head>
        
        <title>Prova valutazione UDA</title>
    <style>
        table.tabella{
        border: 2px solid #CCCCCC;
    }
    
    table.tabella td{
        background-color : #FAEBD7;
        color : back;
        padding : 2px;
        text-align: center;
        font-size: 14px;
    }
    
    table.tabella tr{
        background-color : white;
        color : back;
        padding : 2px;
        text-align: center;
        font-size: 14px;
    }
    </style>
    
        <script language="javascript">
    /* Questo codice l'ho preso online, vorrei funzionasse in maniera simile nella mia tabella*/
    /*Questa funzione legge il valore passato come parametro e dato il valore aggiunge delle opzioni agli altri campi*/
    
    function selezionaOpzioni(scelta) {
    /*Resetto le opzioni precedenti del campo*/
    var campo_der = document.form.campo_der;
    campo_der.options.length = 0;
    /*verifico la scelta e aggiungo i campi*/
    if (scelta == "1") {
    campo_der.options[campo_der.options.length] = new Option('Pomodoro');
    campo_der.options[campo_der.options.length] = new Option('Mozzarella');
    campo_der.options[campo_der.options.length] = new Option('Basilico');
    }
    if (scelta == "2") {
    campo_der.options[campo_der.options.length] = new Option('Pomodoro');
    campo_der.options[campo_der.options.length] = new Option('Aglio');
    campo_der.options[campo_der.options.length] = new Option('Origano');
    }
    if (scelta == "3") {
    campo_der.options[campo_der.options.length] = new Option('Pomodoro');
    campo_der.options[campo_der.options.length] = new Option('Funghi');
    campo_der.options[campo_der.options.length] = new Option('Olive');
    campo_der.options[campo_der.options.length] = new Option('Carciofini');
    }
    }
    function aggiornaOpzioni(scelta){
    var selezionato = document.form.campo_principale.selectedIndex;
    var campo = document.form.campo_principale.options;
    selezionaOpzioni(campo[selezionato].value);
    }
    </script>
      </head>
      <body>
     <form name="form">
    Seleziona Pizza:
    <select name="campo_principale" size="1" onChange="aggiornaOpzioni();">
    <option value="1">Pizza Margherita</option>
    <option value="2">Pizza Marinara</option>
    <option value="3">Pizza Capricciosa</option>
    </select>
    <br />
    <br />
    Seleziona Ingrediente:
    <select name="campo_der" size="1">
    </select>
    
    </form>
    
    
    
    
    <div style=" text-align: left; text-indent: 0px; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px;">
    
    <table width="100%" border="1" cellpadding="1" cellspacing="1" class="tabella">
    
    <tr class="tabella">
    <td class="tabella">
    
    <span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">MACRO-AREA</span>
    </td>
    
    <td class="tabella">
    <span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 4</span>
    </td>
    
    <td class="tabella">
    <span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 3</span>
    </td>
    
    <td class="tabella">
    <span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 2</span>
    </td>
    
    <td class="tabella">
    <span style=" font-size: 10pt; font-family: 'Arial', 'Helvetica', sans-serif; font-style: normal;">LIVELLO 1</span>
    </td>
    </tr>
    
         <tr class="tabella">
         <td class="tabella">
         <select name="campo_principale" size="1" onChange="aggiornaOpzioni();">
         <option value="1">Scrittura</option>
         <option value="2">Lettura</option>
         <option value="3">Contenuto</option>
         </select>
         </td>
    <td class="tabella">
    <textarea name="campo_der" rows="5" cols="" ></textarea>
    </td>
    <td class="tabella">
    <textarea name="" rows="5" cols="" ></textarea>
    </td>
    <td class="tabella">
    <textarea name="" rows="5" cols="" ></textarea>
    </td>
    <td class="tabella">
    <textarea name="" rows="5" cols="" ></textarea>
    </td>
    
    </tr>
    </table>
    </div>
    
      </body>
    </html>
     
  2. macus_adi

    macus_adi Utente Attivo

    Registrato:
    5 Dicembre 2017
    Messaggi:
    882
    Mi Piace Ricevuti:
    49
    Punteggio:
    28
    Sesso:
    Maschio
    Occupazione:
    Developer
    Località:
    L'Aquila
    La logica è abbastanza semplice, prima di tutto carico tutti i modelli ossia "Array di Oggetti", quando selezione /cambio selezione dell'item eseguo la funzione getModel prelevando il valore corrente.
    Premessa doverosa:
    Codice:
    allModel=[['type':'Tipo 1','data':[],...... [... ];
    
    Codice:
    event:{
        'change .items':'getModel',
    }
    currentModel:{},
    allModel:[],
    loadModel:function(){
         var self=this;
         self.call('/api/getModel').then(function(response){
                self.allModel=response.data;
         });
    },
    getModel:function(e){
         var self=this;
         for(var i in this.allModel){
              if($(e.currentTarget+'option:selected') === this.allModel[i].type) this.currentModel=this.allModel[i].data;
         }
    }
    
     
  3. psicomia

    psicomia Nuovo Utente

    Registrato:
    9 Giugno 2019
    Messaggi:
    3
    Mi Piace Ricevuti:
    0
    Punteggio:
    1
    Sesso:
    Femmina
    Grazie, sei stato molto gentile a rispondermi. Appena riuscirò ad orientarmi ti farò sapere se funziona.
     
Sto caricando...

Condividi questa Pagina