Qui l'oggetto JSON:
Questo passaggio non è semplice da spiegare.codice:{ "schema": [ { "categoria": 0 , "articolo": [ { "tipo": 0 , "determinativo": 0 , "indeterminativo": 0 , "partitivo": 0 } , "_genere" , "_numero" ] , "nome": [ { "modo": 0 , "comune": 0 , "proprio": 0 } , { "riferimento": 0 , "di persona": 0 , "di animale": 0 , "di cosa": 0 } , { "cognizione": 0 , "concreto": 0 , "astratto": 0 } , { "entità": 0 , "individuale": 0 , "collettivo": 0 } , "_genere" , { "aspetto": 0 , "mobile": 0 , "genere comune": 0 , "indipendente": 0 , "promiscuo": 0 } , "_numero" , { "struttura": 0 , "variabile": 0 , "invariabile": 0 , "difettivo": 0 , "sovrabbondante": 0 } , { "forma": 0 , "primitivo": 0 , "derivato": 0 , "composto": 0 , "alterato": 0 } ] , "aggettivo": [ { "classe": 0 , "qualificativo": [ { "grado": 0 , "positivo": [ "_genere" , "_numero" ] , "comparativo": [ { "paragone": 0 , "di maggioranza": 0 , "di minoranza": 0 , "di uguaglianza": 0 } , "_genere" , "_numero" ] , "superlativo": [ { "tipo": 0 , "relativo": 0 , "assoluto": 0 } , "_genere" , "_numero" ] } ] , "determinativo": [ { "specificazione": 0 , "possessivo": 0 , "dimostrativo": 0 , "indefinito": 0 , "interrogativo": 0 , "esclamativo": 0 , "numerale": 0 } , "_genere" , "_numero" ] } ] , "pronome": [ { "tipo": 0 , "personale": [ { "funzione": 0 , "soggetto": 0 , "complemento": 0 } , { "persona": 0 , "1ª pers.": 0 , "2ª pers.": 0 , "3ª pers.": 0 } , "_numero" ] , "relativo": [ "_genere" , "_numero" ] , "possessivo": [ "_genere" , "_numero" ] , "dimostrativo": [ "_genere" , "_numero" ] , "indefinito": [ "_genere" , "_numero" ] , "interrogativo": [ "_genere" , "_numero" ] , "esclamativo": [ "_genere" , "_numero" ] , "numerale": [ "_genere" , "_numero" ] } ] , "verbo": [ { "coniugazione": 0 , "1ª coniugazione": 0 , "2ª coniugazione": 0 , "3ª coniugazione": 0 , "con. propria": 0 } , { "modo": 0 , "indicativo": 0 , "congiuntivo": 0 , "condizionale": 0 , "imperativo": 0 , "infinito": 0 , "participio": 0 , "gerundio": 0 } ] , "avverbio": [ { "forma": 0 , "primitivo": 0 , "derivato": 0 , "composto": 0 , "locuzione": 0 } , { "specie": 0 , "di modo": [ { "grado": 0 , "positivo": 0 , "comparativo": 0 , "superlativo": 0 } , { "alterazione": 0 , "diminutivo": 0 , "vezzeggiativo": 0 , "accrescitivo": 0 , "dispregiativo": 0 } ] , "di tempo": 0 , "di luogo": 0 , "di quantità": 0 , "valutativi": 0 , "interrogativi": 0 , "esclamativi": 0 , "presentativi": 0 } ] , "preposizione": [ { "tipo": 0 , "propria": [ { "forma": 0 , "semplice": 0 , "articolata": 0 } ] , "impropria": 0 , "locuzione": 0 } ] , "esclamazione": [ { "tipo": 0 , "propria": 0 , "impropria": 0 , "locuzione": 0 } ] , "congiunzione": [ { "forma": 0 , "semplice": 0 , "composta": 0 , "locuzione": 0 } , { "funzione": 0 , "coordinante": 0 , "subordinante": 0 } ] } ] , "_genere": {"genere": 0 ,"maschile": 0 ,"femminile": 0} , "_numero": {"numero": 0 ,"singolare": 0 ,"plurale": 0} }
Sostanzialmente abbiamo un oggetto principale (cioè il primo blocco di graffe {}) che è l'oggetto JSON. All'interno ho definito una prima proprietà principale, "schema", che è un array. Ogni blocco di quadre [] (array) rappresenta un gruppo di select, mentre ogni blocco di graffe {} (oggetto) rappresenta un elemento select (cioè un gruppo di option). Nota appunto che l'array schema ha in questo caso un solo oggetto, cioè un solo elemento select, il primo che viene creato per la catena, ma nessuno impedisce che inizialmente possano essere presenti più select.
Ogni oggetto (select, gruppo di option) possiede le relative proprietà. Di fatto le chiavi usate per nominare le proprietà non sono altro che i relativi testi/valori che vengono inseriti in ogni option. Tali proprietà, a loro volta, possono contenere un ulteriore array oppure il valore 0. Conterranno un array la dove, l'option selezionata, dovrà generare degli altri select; mentre avrà valore 0 se il segmento della catena, in quel caso, deve interrompersi con quella option.
In questa fase ho elaborato inoltre degli accorgimenti per meglio ottimizzare il tutto. E' possibile infatti usare dei valori stringa all'interno dei blocchi array per impostare dei segnaposto; vedi l'esempio delle stringhe "_genere" e "_numero" usate dentro gli array. Questi elementi saranno sostituiti, durante il parsing, dagli elementi (con nome corrispondente) definiti sempre nell'oggetto JSON (vedi "_genere":{...} e "_numero":{...} definiti alla fine dell'oggetto JSON) in modo da evitare che si ripetano gruppi di option presenti più volte uguali nei vari segmenti dello schema (come in questo caso).
Questo oggetto JSON viene quindi definito nello script e passato alla funzione chainedSelect() per inizializzare la catena. Nell'esempio ho creato una variabile schema che poi ho usato appunto in questo modo:
La variabile con lo schema è minimizzata per ridurre l'ingombro (ho usato uno dei vari tool disponibili online, vedi qui). Teoricamente potrebbe essere maggiormaente sintetizzata, ma per il momento questo è già un buon punto.codice:// Inizializzo la catena di select $('.riga').chainedSelect(schema);
Ogni riga avrà quindi la sua catena di select.
Dentro la funzione/plugin avviene tutta la magia. Lo script, togliendo i commenti e le righe vuote, si riduce a poco più di una cinquantina di righe. Il sistema costruisce gli elementi select e le option solo là dove serve e le rimuove quando non servono.
Chiaramente non ho inserito animazioni di comparsa degli elementi, ho però inserito un po di CSS (specialmente le ultime regole) per gestire l'impostazione delle "etichette". Ovviamente qualsiasi altra modifica può essere opportunamente integrata all'esigenza.
Ci sarebbe molto altro da dire ma per il momento mi fermo qui.
Se eventualmente servono ulteriori chiarimenti chiedi pure.
Buon proseguimento
EDIT:
Perdonate la lungaggine
Rispondi quotando