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

psicomia · 9 Giu 2019

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>

macus_adi · 10 Giu 2019

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;
     }
}

psicomia · 10 Giu 2019

Grazie, sei stato molto gentile a rispondermi. Appena riuscirò ad orientarmi ti farò sapere se funziona.

Cerca

Cerca

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

psicomia

Nuovo Utente

macus_adi

Utente Attivo

psicomia

Nuovo Utente

Discussioni simili