controllo immediato in una select

[torrone]

devo realizzare una serie di select, che alla loro valorizzazione mi effettui immediatamente dei controlli. mi spiego meglio con un esempio:

Ho dei valori prestabiliti: max_persone, max_adulti, max_ragazzi, max_neonati

mettiamo che siano:

max_persone: 2
max_adulti: 1
max_ragazzi: 1
max_neonati: 1

ho tre select: adulti, ragazzi, neonati

nella select adulti posso selezionare solo 1 mentre nelle select ragazzi e neonati posso selezionare 0 oppure 1

devo far si che mi effettui questo controllo:

la somma tra max_adulti, max_ragazzi, max_neonati non dev'essere mai superiore a max_persone e questo controllo dev'essere effettuato ogni volta che si seleziona un valore nella select

esempio

1 adulto è già preimpostato

ora posso aggiungere 1 solo tra ragazzi e neonati.

imposto 1 ragazzo e fin qui nessun problema.

ora provo ad impostare anche 1 neonato e qui deve bloccarmi e/o darmi un errore o impedirmelo.


come posso fare?

[cavicchiandrea]

- 4 (una per ogni select) variabili globali impostate a 0
- 4 (una per ogni select) funzioni che eseguono un ciclo for sulle select che andrà a valorizzare la medesima variabile //si può fare anche con una sola select ma sarebbe un po più complicata
- 1 funzione verifica che controllerà le variabili e le select
Questo come lo farei io ma probabilmente ci sono soluzione migliori

[torrone]

Originariamente inviato da cavicchiandrea
- 4 (una per ogni select) variabili globali impostate a 0
- 4 (una per ogni select) funzioni che eseguono un ciclo for sulle select che andrà a valorizzare la medesima variabile //si può fare anche con una sola select ma sarebbe un po più complicata
- 1 funzione verifica che controllerà le variabili e le select
Questo come lo farei io ma probabilmente ci sono soluzione migliori

grazie della risposta .. riesci a farmi qualche esempio pratico?

[Vindav]

io userei un unica funzione richiamata da ogni select, in questa funzione controlla che la somma dei valori selezionati delle select non superi il valore della variabile globale max_persone

[torrone]

non saprei come partire sto cominciando ad imparare ora javascript ..

cercando anche qui su html.it ho trovato questo per recuperare il valore di una select

nomeSelect.options[nomeSelect.selectedIndex].value;

ma funziona così? se seleziono uno mi mostra il primo alert altrimenti mi mostra il secondo...

<script>
var selectProva = prova.options[prova.selectedIndex].value;

if (selectProva == "1") {
alert("hai selezionato uno");
} else {
alert("hai selezionato un altra option");
}
</script>

<select name="prova">
<option value="1">uno</option>
<option value="2">due</option>
<option value="3">tre</option>
</select>

[torrone]

mi son dimenticato la funzione.. riscrivo.. dite che una cosa così funziona? o senò, cosa ci sarebbe da correggere?

<script>
function test() {

var selectProva = prova.options[prova.selectedIndex].value;

if (selectProva == "1") {
alert("hai selezionato uno");
} else {
alert("hai selezionato un altra option");
}

}
</script>

<form name="testjs">
<select name="prova" onclick="test()">
<option value="1">uno</option>
<option value="2">due</option>
<option value="3">tre</option>
</select>
</form>

[torrone]

sto provando anche con jquery ma evidentemente mi sto perdendo qualche banalità..

mi apre sempre alert("a");

<script type="text/javascript">

function calcolo(){
var $val1 = $('[name="Box"]').val();
var $val2 = $('[name="Box2"]').val();
var $tot = $val1 + $val2;
if ($tot > 3) {
alert("a");
} else {
alert("b");
}
}
</script>
<form>
<select name="Box" onclick="calcolo()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="Box2" onclick="calcolo()">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</form>

[cavicchiandrea]

Ho fatto alcuni cambiamenti vedi se cosi ti va bene http://webandylab.altervista.org/testlink.html

[torrone]

Originariamente inviato da cavicchiandrea
Ho fatto alcuni cambiamenti vedi se cosi ti va bene http://webandylab.altervista.org/testlink.html

si è quello che cercavo di fare, ma come mai il mio non funzionava e il tuo si aggiungendo parseInt?
cioè perchè è stato necessario cercare un valore intero?

poi volevo farti un ulteriore domanda

riprendiamo il tuo codice funzionante

function calcolo(){
var $val1 = parseInt($('[name="Box"]').val());
var $val2 = parseInt($('[name="Box2"]').val());
var $tot = $val1 + $val2;
if ($tot > 3) {
alert("a");
} else {
alert("b");
}
}

vorrei far si che se il totale è maggiore di tre l'ultima select utilizzata si azzeri o torni al valore che era impostata prima, si può?

[darkonme]

Certo che si può ...

<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <style type="text/css">
            #topnav{width:900px; height:40px;}
            #topnav li{display: inline;
            }
        </style>
        <script type="text/javascript">
            
            var defaultBoxValues = new Array();
            
            function calcolo(select){
                
                var selName = $(select).attr('name');
                
                var val1 = parseInt($('[name="Box"]').val());
                var val2 = parseInt($('[name="Box2"]').val());
                var tot = val1 + val2;
                
                if (tot > 3) {
                    
                    if (defaultBoxValues[selName]!=undefined){
                        $(select).val(defaultBoxValues[selName]);
                    }else{
                        $(select).val(1);
                    }
                } else {
                    defaultBoxValues[selName] = parseInt($(select).val());
                }
            }
        </script>
    </head>
    <body>


        <form>
            <select onchange="calcolo($(this));" name="Box">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
            <select onchange="calcolo($(this));" name="Box2">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </form>


    </body>
</html> 

Così dovrebbe andare.