mostrare una riga solo se scelgo 2 campi da una select

**allin81** · 15-10-2014, 15:24

Ciao a tutti
vorrei fare in modo che una riga venga mostrata solo se scelgo 2 opzioni in particolari da un menu select
Esempio: se dal menu select scelgo "volo+hotel" mi deve comparire una riga sotto dove ho un'altra select con la scelta degli aeroporti, se scelgo "solo hotel" non deve comparire niente, se scelgo "bus+hotel" deve comparire un'altra select con la scelta della città dove poter prendere il bus.

Come posso fare?

I test li sto facendo su questa pagina, cosi' capite meglio cosa mi puo' servire:
http://bit.ly/1EXPIEW

**cavicchiandrea** · 15-10-2014, 16:16

Si definiscono select incatenate (esempio più classico regioni > provincia > comuni) la soluzione più semplice e mette le "seconde" select nascoste (con display:none) e in base a cosa selezioni nel menù principale mostri la select collegata, potresti anche popolare la seconda select in base alla prima ma l'operazione è molto più complessa

**Vindav** · 15-10-2014, 16:19

Sarà qualcosa del genere:

codice:

var option = opt.options[opt.selectedIndex].value;
	if(option=='2'){
		document.getElementById('aeroporti').style.display='block';
		}
		else if(option=='3'){
		document.getElementById('bus').style.display='block';
		}else{
document.getElementById('aeroporti').style.display='none';
		document.getElementById('bus').style.display='none';
		}

**allin81** · 15-10-2014, 16:24

Qualche esempio già bello e fatto da poter implementare esiste?
Sto usando questo codice ma ho problemi perche' o mi fa vedere una sola select oppure non mi apre le città

codice:

function setCities(chooser) {
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var cityChooser = chooser.form.elements["città"];
    while (cityChooser.options.length) {
        cityChooser.remove(0);
    
    }
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = mezzo[choice];
    newElem = document.createElement("option");
    newElem.text = "Seleziona la città:";
    newElem.value = "";
    cityChooser.add(newElem, where);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            newElem = document.createElement("option");
            newElem.text = db[i].text;
            newElem.value = db[i].value;
            cityChooser.add(newElem, where);

        }

    }
    

}
</script>

<script>

function MostraRiga(opt){
    var option = opt.options[opt.selectedIndex].value
        if(option=='3'){
        document.getElementById('invisibile').style.display='block'
        }else{
        document.getElementById('invisibile').style.display='none'
        }    
}

</script>

**carlomarx** · 15-10-2014, 16:36

Soluzione base:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mostrare una riga solo se scelgo 2 campi da una select</title>
<script type="text/javascript">
function showNode (sID) {
    showNode.active && showNode.active.style.setProperty("display", "none");
    showNode.active = document.getElementById(sID);
    showNode.active && showNode.active.style.removeProperty("display");
}
</script>
</head>

<body>

<p>
    Select principale:
    <select onchange="showNode(this.value);">
        <option value="altro1">Altro #1</option>
        <option value="volo_hotel">volo+hotel</option>
        <option value="altro2">Altro #2</option>
        <option value="bus_hotel">bus+hotel</option>
        <option value="altro3">Altro #3</option>
    </select>
</p>

<p id="volo_hotel" style="display: none;">
    Dove:
    <select name="citta">
        <option>Roma</option>
        <option>Milano</option>
        <option>Napoli</option>
    </select>
</p>

<p id="bus_hotel" style="display: none;">
    Aeroporto:
    <select name="aeroporto">
        <option>Aeroporto #1</option>
        <option>Aeroporto #2</option>
        <option>Aeroporto #3</option>
    </select>
</p>
</body>
</html>

**Vindav** · 15-10-2014, 16:41

le devi mostrare o creare?

**allin81** · 15-10-2014, 17:23

con l'esempio di carlomarx sono riuscito a fare ciò che volevo

L'unica cosa che manca è che non riesco a far comparire subito sotto a "tipo di pacchetto" la scritta "scegli aeroporto" oppure "scegli città di partenza".
Per il resto è perfetto
Grazie per ora!

**allin81** · 08-11-2014, 02:11

Rieccomi
sto utilizzando la soluzione di carlomarx e mi trovo abbastanza bene nella scelta delle opzioni.
L'unico problema e' che quando invio il modulo alla pagina di ricerca, vorrei fare in modo da trovare nella stessa pagina i campi già precompilati per una successiva ricerca ma noto che il campo "scegli città" scompare e per farlo riapparire devo cliccare prima su un'altra voce e poi di nuovo su bus + hotel.
Lo stesso succede per volo + hotel.

C'e' qualche errore? potrei risolvere in qualche modo?

Potete vedere l'esempio qui, fate una ricerca di 7 giorni tipo dal 1 febbraio con bus + hotel da qualsiasi città, una volta finiti nella pagina della ricerca sulla sinistra avrete di nuovo il modulo ma non comprare la città scelta ed è un bug perche' l'utente deve fare 2 azioni prima di poter scegliere la città nuovamente

http://bit.ly/1EXPIEW

Discussione: mostrare una riga solo se scelgo 2 campi da una select

Strumenti discussione

Ricerca discussione

Visualizza

mostrare una riga solo se scelgo 2 campi da una select

Permessi di invio