No problem, ho comunque iniziato a vedere qualcosa.Killerworm, non preoccuparti e non impazzire. goditi il week end!!!
Sì, giusto una domanda: la tua pagina è in HTML oppure XHTML?ad ogni modo se hai bisogno di informazioni, contattami pure!
A naso mi pare XHTML ma vorrei averne certezza così da impostare opportunamente il sistema.
poi quando passi a Bologna ritieniti invitato per una scorpacciata di lasagne, salumi e tortellini in brodo!!!terrò a mente, grazie per l'invito.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Ciao Killerworm,Originariamente inviata da KillerWorm
No problem, ho comunque iniziato a vedere qualcosa.
Sì, giusto una domanda: la tua pagina è in HTML oppure XHTML?
A naso mi pare XHTML ma vorrei averne certezza così da impostare opportunamente il sistema.
La pagina è in html e php. Probabilmente ci sono stringa comuni all'xhtml...
Bene, come ho anticipato, sono riuscito a mettere a punto lo scriptino che fa quanto da te richiesto e forse anche di più.
Premetto che si tratta comunque di uno script "artigianale" realizzato da zero, nel senso che non ho preso come modello script già esistenti (probabilmente ce ne sono di diversi in giro) e non è strutturalmente studiato per la "grande distribuzione", per cui sarebbe potuto essere meglio impostato ed ottimizzato (ad esempio, per crearne una qualche estensione jQuery). Ad ogni modo ritengo che sia abbastanza funzionale e semplice da utilizzare, per ciò che serve a te.
Ho fatto qualche test è "sembra" funzionare tutto. Questa è comunque una versione beta che potrebbe richiedere eventuali correzioni e/o migliorie.
Qui una demo:
- la tua pagina html
- JavaScript, da mettere nel file "select_cascata.js" che sarà incluso nella paginacodice HTML:<!DOCTYPE HTML> <html> <head> <title>Select a cascata</title> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-3.1.1.min.js"></script> <script src="select_cascata.js"></script> <style type="text/css"> body { background: #eee; font: .9rem/1 Tahoma, Geneva, sans-serif; color: #567; } fieldset{ border: 1px solid #aaa; } select{ width: 200px; height: 22px; } select, select>option{ color: #111; } select.vuoto, option.vuoto{ color: #f00; } select.etichetta, option.etichetta{ color: #228; } </style> </head> <body> <h1>Select a cascata istanziabili per gruppi indipendenti</h1> <fieldset> <legend>Gruppo 0</legend> <select class="combo_0 gruppo_0"> <option label=" "></option> </select> => <select class="combo_1 gruppo_0"> <option label=" "></option> </select> => <select class="combo_2 gruppo_0"> <option label=" "></option> </select> </fieldset> <fieldset> <legend>Gruppo ABC</legend> <select class="combo_0 gruppo_aBc"> <option>testo 1</option> </select> => <select class="combo_1 gruppo_aBc"> <option>testo 1_2</option> </select> => <select class="combo_2 gruppo_aBc"> <option>testo 1_2_3</option> </select> </fieldset> <fieldset> <legend>Gruppo XYZ</legend> <select class="combo_0 gruppo_XyZ"> <option>testo 1</option> </select> => <select class="combo_1 gruppo_XyZ"> <option>testo 1_2</option> </select> </fieldset> </body> </html>
Come puoi vedere, sullo script dovrai impostare i dati, con una struttura ad array annidate. L'ho pensata così per essere il più semplice possibile da gestire. Inoltre è indentata volutamente in quel modo per comprendere meglio la struttura.codice:;(function(){ // ------------------------------------- Impostazioni ------------------------------------- var impostazioni = { testoQuandoVuoto : '-- non disponibile --' , valoreQuandoVuoto : '-1' , testoQuandoNonVuoto : '-- seleziona un\'opzione --' , valoreQuandoNonVuoto : '0' , disabilitaQuandoVuoto : true , selezioneAutomaticaQuandoUnicaScelta : true , mantieniSelezionePerSosia : true , dati: [ ['testo 1', 'val 1' , ['testo 1_1', 'val 1_1' , ['testo 1_1_1', 'val 1_1_1'] , ['testo 1_1_2', 'val 1_1_2'] ] , ['testo 1_2', 'val 1_2' , ['testo 1_2_1', 'val 1_2_1'] , ['testo 1_2_2', 'val 1_2_2'] , ['testo 1_2_3', 'val 1_2_3'] ] , ['sosia in testo 1 e testo 2', 'val 1_3' , ['testo 1_3_1', 'val 1_3_1'] , ['testo 1_3_2', 'val 1_3_2'] , ['testo 1_3_3', 'val 1_3_3'] ] ] , ['testo 2', 'val 2' , ['testo 2_1', 'val 2_1' , ['testo_2_1_1', 'val 2_1_1'] , ['testo 2_1_2', 'val 2_1_2'] ] , ['testo 2_2', 'val 2_2' , ['testo 2_2_1', 'val 2_2_1'] , ['testo 2_2_2', 'val 2_2_2'] , ['testo 2_2_3', 'val 2_2_3'] ] , ['sosia in testo 1 e testo 2', 'val 2_2'] ] , ['testo 3', 'val 3' , ['testo 3_1 (unica scelta)', 'val 3_1' , ['testo 3_1_1', 'val 3_1_1'] , ['testo 3_1_2', 'val 3_1_2'] , ['testo 3_1_3', 'val 3_1_3'] , ['testo 3_1_4', 'val 3_1_4'] ] ] , ['testo 4', 'val 4'] ] } // ---------------------------------------------------------------------------------------- function aggiornaCascata(select, arrDati, isRicorsione){ // Aggiorna la cascata di select (dello stesso gruppo) partendo da quella specificata if (!select) return false; arrDati = arrDati || impostazioni.dati; var indiceSelectCorrente = getIndiceSelect(select) , testoSelectCorrente = $('>option:selected',select).text() , arrTesti = [testoSelectCorrente] , subsetDatiProssimaSelect = [] , corrispondenzaTrovata , html = '' ; if (!isRicorsione) { // Ottengo il percorso corrente della cascata, dalla select combo_0 a quella specificata, creando un array dei testi relativi alle option selezionate $('.'+getNomeGruppo(select)).each(function(){ var i = getIndiceSelect(this); if (i<=indiceSelectCorrente) arrTesti[i] = $('>option:selected',this).text(); }); } // Processo i dati e costruisco il contenuto della select if(arrDati.length==0) html = optionVuota; else { arrTesti.some(function(testo, i){ corrispondenzaTrovata = false arrDati.forEach(function(dato, n){ attrSelected = ''; if (dato[0]==testo || (arrDati.length==1 && impostazioni.selezioneAutomaticaQuandoUnicaScelta)) { subsetDatiProssimaSelect = dato.slice(2); corrispondenzaTrovata = true; attrSelected = ' selected'; } if (arrTesti[i]==testoSelectCorrente) html += '<option value="'+dato[1]+'"'+attrSelected+'>'+dato[0]+'</option>'; }); arrDati = corrispondenzaTrovata ? subsetDatiProssimaSelect : []; if (!corrispondenzaTrovata) return true; }); html = (html==''?optionVuota:optionEtichetta)+html; } $(select).html(html); impostaSelect(select); aggiornaCascata(getProssimaSelect(select), arrDati, true); } function getProssimaSelect(select){ return $('.combo_'+(+getIndiceSelect(select)+1)+'.'+getNomeGruppo(select)).get(0); } // Restituisce la prossima select dello stesso gruppo, oppure undefined function getIndiceSelect(select){ return (select.className.match(/(?:^| )(?:combo_)(\d+)(?: |$)/)||[false]).pop(); } // Restituisce l'indice prelevato dalla classe combo_, oppure false function getNomeGruppo(select){ return (select.className.match(/(?:^| )(gruppo_[^ ]+)(?: |$)/)||[false]).pop(); } // Restituisce il nome, per intero, della classe gruppo_ (es: gruppo_xyz), oppure false function impostaSelect(select){ // Imposta la select in base al contenuto e alla selezione attuale $(select).removeClass('vuoto etichetta').prop('disabled',false) .has('.etichetta:selected').addClass('etichetta').end().has('.vuoto').addClass('vuoto') .filter(function(){return impostazioni.disabilitaQuandoVuoto}).prop('disabled',true); } var optionVuota = '<option class="vuoto" value="'+impostazioni.valoreQuandoVuoto+'">'+impostazioni.testoQuandoVuoto+'</option>' , optionEtichetta = '<option class="etichetta" value="'+impostazioni.valoreQuandoNonVuoto+'">'+impostazioni.testoQuandoNonVuoto+'</option>' ; // Inizializzazione $(function(){ $('select[class*="combo_"]').filter(function(){return getIndiceSelect(this);}) .change(function(){ impostaSelect(this); var dati, prossimaSelect = getProssimaSelect(this); if ($(this)[0].selectedIndex==0) dati = []; // Se è stata selezionata la prima option (etichetta), le select a seguire saranno svuotate else if (!impostazioni.mantieniSelezionePerSosia) prossimaSelect.selectedIndex = 0; // Se mantieniSelezionePerSosia è false, la prossima select risulterà impostata sulla prima option (etichetta) e quelle a seguire saranno svuotate aggiornaCascata(prossimaSelect, dati); }); $('select.combo_0').each(function(){ aggiornaCascata(this); }) }) })();
Potrai inoltre impostare dei parametri per configurare dei valori nelle option e delle funzionalità del sistema. I nomi delle variabili sono autodescrittivi quindi non ho inserito troppi commenti.
Per ora non entro nella descrizione del tutto ma do giusto queste poche indicazioni per l'utilizzo. Magari appena avrò un po' di tempo spiegherò meglio i particolari.
Se comunque hai delle domande specifiche, chiedi pure.
Buon lavoro
Ultima modifica di KillerWorm; 12-10-2016 a 17:34
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Come puoi vedere, sullo script dovrai impostare i dati, con una struttura ad array annidate. L'ho pensata così per essere il più semplice possibile da gestire. Inoltre è indentata volutamente in quel modo per comprendere meglio la struttura.
Potrai inoltre impostare dei parametri per configurare dei valori nelle option e delle funzionalità del sistema. I nomi delle variabili sono autodescrittivi quindi non ho inserito troppi commenti.
Per ora non entro nella descrizione del tutto ma do giusto queste poche indicazioni per l'utilizzo. Magari appena avrò un po' di tempo spiegherò meglio i particolari.
Se comunque hai delle domande specifiche, chiedi pure.
Buon lavoro
ciao Killerworm, hai fatto un super lavoro! I miei complimenti. davvero!!! altro che lasagne!!!
Allora, l'ho testato così come l'hai postato tu ed è completissimo, non si potrebbe chiedere di meglio, tuttavia, col mio ciclo while, non funziona!!! (ma il tuo lavoro non è andato perso, perché userò il tuo script per una pagina senza ciclo while, quella che l'utente usa per aprire la sua pratica)
il problema è che dovresti vedere come è fatta la mia tabella per avere un'idea della struttura che sto cercando di realizzare.
ti spiego per punti:
1) il superuser deve poter vedere la sequenza delle select già riempite con i dati inseriti dall'utente in fase di apertura della sua pratica, e poi, se questa tripletta non è corretta, intervenire per correggerla... se è corretta la deve assegnare ad un delegato...
2) intervenendo per correggere lo script il superuser deve poter concatenare le select correttamente.
3) le select devono rispettare il ciclo while!
domanda: ti posso girare in privato la pagina php così ci dai un occhio e magari ti fai un'idea del tutto e tentiamo di modificare lo script in base ai tre punti citati?
grazie ancora Killerworm,sei stato davvero bravo!!!
Ciao, ti rispondo velocemente per il momento... in effetti non ti ho indicato alcuni punti essenziali che ti servono per impostare il tutto sul tuo sistema... ho avuto poco tempo
Sì, lo fa già.1) il superuser deve poter vedere la sequenza delle select già riempite con i dati inseriti dall'utente in fase di apertura della sua pratica, e poi, se questa tripletta non è corretta, intervenire per correggerla... se è corretta la deve assegnare ad un delegato...
Dovrai semplicemente riempire le select con le <option> che conterranno i valori che l'utente ha inserito. Il sistema poi analizzerà tali valori e (se ovviamente sono esistenti nell'array dei dati di origine) andrà a riempire le select con i dati di origine impostando automaticamente la option (relativa al dato inserito dall'utente) come selected.
Vedi l'esempio riferito al "gruppo ABC", dove ho inserito dei valori "preesistenti", per l'appunto.
Quindi sulla pagina superuser Quello che dovrai fare nel tuo PHP è inserire opportunamente, dentro le select, tali option con i valori prelevati dal db.codice:<legend>Gruppo ABC</legend> <select class="combo_0 gruppo_aBc"> <option>testo 1</option> </select> => <select class="combo_1 gruppo_aBc"> <option>testo 1_2</option> </select> => <select class="combo_2 gruppo_aBc"> <option>testo 1_2_3</option> </select>
Se non c'è valore o se vuoi creare delle select inizializzate senza alcuna selezione (quindi nella pagina che sarà mostrata all'utente per la prima compilazione) dovrai inserire una semplice <option> vuota (con label=" ", in modo che risulti comunque validata), come per il gruppo 0 nell'esempio:
codice:<legend>Gruppo 0</legend> <select class="combo_0 gruppo_0"> <option label=" "></option> </select> => <select class="combo_1 gruppo_0"> <option label=" "></option> </select> => <select class="combo_2 gruppo_0"> <option label=" "></option> </select>Non ho capito bene cosa intendi ma credo che già lo faccia2) intervenendo per correggere lo script il superuser deve poter concatenare le select correttamente.
Ogni cascata di select è rappresentata da un gruppo specificato nell'attributo class di ogni select. Cioè, sull'attributo class, per ogni select della stessa cascata, oltre alla sequenza (combo_0, combo_1, combo_n) che indicano i livelli della cascata, dovrai inserire un nome di classe composto dal prefisso "gruppo_" e da un qualsiasi valore; nel tuo caso potrebbe essere l'id della pratica (esempio gruppo_0123ABCD-PIPPO). A questo punto, il sistema individuerà le select dello stesso gruppo per creare la cascata.
Di nuovo, non ho capito bene cosa intendi ma forse fa anche questo3) le select devono rispettare il ciclo while!.. al prefisso "combo_" devi aggiungere un indice sequenziale, da 0 a n, che identificherà i livelli della cascata (così come era sul "vecchio" script). Poi la classe "gruppo_" fa il resto.
Per il momento prova a vedere se queste indicazioni hanno chiarito qualcosa.domanda: ti posso girare in privato la pagina php così ci dai un occhio e magari ti fai un'idea del tutto e tentiamo di modificare lo script in base ai tre punti citati?
grazie ancora Killerworm,sei stato davvero bravo!!!
Non c'è di che.
Ultima modifica di KillerWorm; 13-10-2016 a 12:21
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando
