Newsgroup: it.comp.lang.javascript
Titolo: SelectBox che "abilitano" altre selectbox

ciao a tutti
vengo subito al problema cercando di spiegarmi il meglio possibile.
Ho delle quartine di select box (XXXX,YYYY,ecc) ognuna di queste ne ha
un'altra vicina(xxxx,yyyy,...)
Per ogni quartina devono essere selezionate 2 (primario, secondario)
tra le prime selectbox (XXXX,YYY..) mentre le altre devono rimanere con
valore vuoto. Le seconde selectbox possono avere valore: vuoto, SI, NO.
I valori si/no dovrebbero essere selezionabili solo se si è
selezionato un valore primario/secondario dalla selectbox (primaria)
che le precede.
Dunque ricapitolando, per le prime Select selezionare almento 1 con
valore primario e una con valore secondario, le altre devono essere
nulle; per le seconde rendere selezionabile un valore tra Si/NO solo se
la select che le precede è stata contrassegnata con
primario/secondario.
X   x
X   x
X   x
X   x
Y   y
Y   y
Y   y
Y   y
sapete dirmi se a livello di javascript fare questo è una cosa
fattibile e magari come si fa?
Io il tutto l'ho realizzato lato server, ora mi si chiede di realizzare
questo lato client, così che l'utente abbia subito un riscontro se sta
sbagliando a selezionare determinate opzioni. Allo stato attuale
infatti tutte le selezioni vengono consentite e l'utente riceve la
segnalazione dell'errore solo quando gli ritorna dal server.
Se qualcuno mi può dare una mano lo ringrazio.. non ne so molto di
javascript.. e questi in azienda pensano che un client browser sia come
un applicativo o un client java senza rendersi conto che un browser ha
parecchie limitazioni a riguardo. Spero cmq che con javascript si
riesca ad aggirare qualcosa...
Fatemi sapere
ciao a tutti

# Ho delle quartine di select box (XXXX,YYYY,ecc) ognuna di queste ne ha
# un'altra vicina(xxxx,yyyy,...)
# Per ogni quartina devono essere selezionate 2 (primario, secondario)
# tra le prime selectbox (XXXX,YYY..) mentre le altre devono rimanere con
# valore vuoto. Le seconde selectbox possono avere valore: vuoto, SI, NO.
# I valori si/no dovrebbero essere selezionabili solo se si è
# selezionato un valore primario/secondario dalla selectbox (primaria)
# che le precede.
# [ecc.]
Non sei riuscito a spiegarti al meglio, la lingua italiana
permette molto di più e in più breve spazio. :)
Stasera son stanco morto (oltre che acido) e punto
al minimo sforzo: dimmi se questo puo' aiutarti e/o
se magari ti serve altro aiuto:
<form name="Modulo">
    <select name="scelta"
onChange="this.value==''?document.Modulo.conferma.style.display='none':docum
ent.Modulo.conferma.style.display='inline'">
        <option value=""></option>
        <option value="1">primario</option>
        <option value="2">secondario</option>
    </select>
    <select name="conferma" style="display:none">
        <option value=""></option>
        <option value="1">si</option>
        <option value="0">no</option>
    </select>
</form>
Mancano naturalm, ma sono più facili, i controlli
di esistenza ed unicità delle due selezioni primario
e secondario..

Io ora ho questo:
<select name="scelta0"
onChange="this.value==''?document.Modulo.conferma0.style.display='none':document.Modulo.conferma0.style.display='inline'">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma0" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
    </select>
    <br>
    <select name="scelta1"
onChange="this.value==''?document.Modulo.conferma1.style.display='none':document.Modulo.conferma1.style.display='inline'">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma1" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
    </select>
    <br>
    <select name="scelta2"
onChange="this.value==''?document.Modulo.conferma2.style.display='none':document.Modulo.conferma2.style.display='inline'">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma2" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
    </select>
    <br>
    <select name="scelta3"
onChange="this.value==''?document.Modulo.conferma3.style.display='none':document.Modulo.conferma3.style.display='inline'">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma3" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
    </select>
Questa è una quartina di selectbox. Nel mio form ho più quartine di
questo tipo. Ora voglio che per ogni quartina sia selezionabile solo 1
selectbox con valore "primario" solo 1 selectbox con valore
"secondario" e che le rimaneti 2 siano a valore nullo.
Come si può fare?
Grazie

un altra domanda su questo script qui sopra..
ma se un utente seglie primario e poi sulla secondabox sceglie SI.
quindi si accorge di aver sbagliato e deseleziona primario portandolo a
nullo.
La seconda box viene nascosta ma il valore rimane a SI?! oppure viene
annullato anche questo e non viene inviato con il form? io ho bisogno
che sia annlullato.
grazie per le risposte

Vedi il codice che segue: e' solo lungo e quasi per niente complicato.
Conta che e' solo uno dei metodi usabili, forse il piu' vecchio e quindi
anche il piu' portabile. Puoi eseguirlo cosi' come lo trovi, ma dovrai
completarlo con calma. Fai qualche prova off-line, poi fanne delle altre
e poi se/quando pensi di avere ancora bisogno posta nel NG.
C.U.
:)
<!-- Questo TAG va messo, di preferenza, nell'HEAD -->
<script type="text/javascript">
// dichiara un'unica funzione che riconosce gli elementi tramite un indice:
//   la corrispondenza indice - nome elemento e' a cura dello sviluppatore
function scegli(index) {
 // cerca di risolvere i nomi per prima cosa all'interno del form 'Modulo'
 with (document.Modulo) {
  // importante: valuta un nome (stringa) con il suo equivalente valore
JavaScript!
  //   nota: portare il ".value" fuori dall'eval e' la stessa cosa (vd per
es. dopo)
  selezione = eval("scelta" + index + ".value");
  // qui viene referenziato il select SI/NO relativo al select che ha
causato l'evento
  el = eval("conferma" + index);
  if (selezione == '') {  // se hai tolto la selezione
   el.value = '';  // annulla l'eventuale selezione (e' quello che volevi)
   el.style.display = 'none';  // e nasconde il select
  } else {
   //el.value = '';  // volendo, anche qui si annulla l'eventuale selezione
   el.style.display = 'inline';  // e mostra il select
  }
 }
}
function convalida() {
 // anche qui cerca di interpretare tutto prima come elemento del form
 with (document.Modulo) {
  // qui devi fare tutti i controlli di esistenza e univocita', non sono
difficili
  action = "processa.php";  // la pagina successiva...
  submit();
 }
}
</script>
<form name="Modulo" action="JavaScript:convalida()" method="post">
    <select name="scelta0" onChange="scegli(0)">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma0" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
        <option value="2">NO</option>
    </select>
    <br/>
    <select name="scelta1"
onChange="this.value==''?document.Modulo.conferma1.style.display='none':docu
ment.Modulo.conferma1.style.display='inline'">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma1" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
        <option value="2">NO</option>
    </select>
    <br/>
    <select name="scelta2"
onChange="this.value==''?document.Modulo.conferma2.style.display='none':docu
ment.Modulo.conferma2.style.display='inline'">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma2" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
        <option value="2">NO</option>
    </select>
    <br/>
    <select name="scelta3"
onChange="this.value==''?document.Modulo.conferma3.style.display='none':docu
ment.Modulo.conferma3.style.display='inline'">
        <option value=""></option>
        <option value="1">Primario</option>
        <option value="2">Secondario</option>
    </select>
    <select name="conferma3" style="display:none">
        <option value=""></option>
        <option value="1">SI</option>
        <option value="2">NO</option>
    </select>
    <br/>
    <input type="submit" value="Convalida"/>
</form>