Formazione che cambia

**valient13** · 15-05-2012, 10:09

Salve a tutti, dovrei far si che quando cambio dal selct box un option mi cambia la disposizione dei select box per scegliere i giocatori, faccio un esempio se scelgo 4 3 3 mi fa vedere cosi:
Nome: 343.jpg
Visite: 51
Dimensione: 90.2 KB

Nome: 343.jpg
Visite: 51
Dimensione: 90.2 KB

mentre se scelgo 343 mi compare:
Nome: 433.jpg
Visite: 52
Dimensione: 89.5 KB

come potrei farlo?

**criric** · 15-05-2012, 14:12

Ciao
se sono immagini che devi cambiare potresti fare cosi:

Codice HTML:

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function cambia(immagine) {
                var percorso = "/images/"
                document.getElementById('mostra').innerHTML = "<img src='" + percorso + immagine + "' alt='formazione'/>";
            }
        </script>
    </head>
    <body>
        <select name="formazione" onchange="cambia(this.options[this.selectedIndex].value)">
            <option value=""></option>
            <option value="formazione1.jpg">4 - 4 - 2</option>
            <option value="formazione2.jpg">4 - 3 - 3</option>
        </select>
        <div id="mostra"></div>
    </body>
</html>

**valient13** · 15-05-2012, 14:48

non sono immagini ma è un div dove c'è il campo ed io ogni volta che seleziono la formazione mi cambia solo l'impostazione degli select box, nelle immagini si vede di il campo che quello resta sempre cosi perchè è un id poi dentroil div ci metto i select box che sono i riquadri in nero ed cambiano ogni volta che seleziono l'option

**criric** · 15-05-2012, 14:49

Puoi postare la struttura del div?

**valient13** · 15-05-2012, 15:01

Codice PHP:


<?php require_once __DIR__ . '/header.php'; ?>

  <!-- Content -->

  <div id="content">

      <div id="conteiner" align="center">

    <br>

        <form>

            <select>

                <option value="0">Scegli la formazione</option>

                <option value="1">433</option>

                <option value="2">343</option>

            </select>

            <br><br>

            <div id="campo">

                <table>

                    <tr>

                    <td><div style="padding-bottom: 50px"></td>

                    </tr>

                    <tr>

                        <td><select><option>Portiere 1</option><option>Portiere 2</option><option>Portiere 3</option></select></td>

                    </tr>

                </table>

                <table>

                    <tr>

                    <td><div style="padding-bottom: 100px"></td>

                    </tr>

                    <tr>

                        <td><select><option>Difensore 1</option><option>Difensore 2</option><option>Difensore 3</option></select></td>

                        <td></td>

                        <td><select><option>Difensore 1</option><option>Difensore 2</option><option>Difensore 3</option></select></td>

                        <td></td>

                        <td><select><option>Difensore 1</option><option>Difensore 2</option><option>Difensore 3</option></select></td>

                        <td></td>

                        <td><select><option>Difensore 1</option><option>Difensore 2</option><option>Difensore 3</option></select></td>

                    </tr>

                </table>

                <table>

                    <tr>

                    <td><div style="padding-bottom: 270px"></td>

                    </tr>

                    <tr>

                        <td><select><option>Centrocampista 1</option><option>Centrocampista 2</option><option>Centrocampista 3</option></select></td>

                        <td></td>

                        <td><select><option>Centrocampista 1</option><option>Centrocampista 2</option><option>Centrocampista 3</option></select></td>

                        <td></td>

                        <td><select><option>Centrocampista 1</option><option>Centrocampista 2</option><option>Centrocampista 3</option></select></td>

                    </tr>

                </table>

                                <table>

                    <tr>

                    <td><div style="padding-bottom: 270px"></td>

                    </tr>

                    <tr>

                        <td><select><option>Attaccante 1</option><option>Attaccante 2</option><option>Attaccante 3</option></select></td>

                        <td></td>

                        <td><select><option>Attaccante 1</option><option>Attaccante 2</option><option>Attaccante 3</option></select></td>

                        <td></td>

                        <td><select><option>Attaccante 1</option><option>Attaccante 2</option><option>Attaccante 3</option></select></td>

                    </tr>

                </table>

            </div>

            <input type="submit" name="inviaformazione" value="Invia" class="tb12">

        </form>

      </div>

    <?php require_once __DIR__ . '/sidebar.php'; ?>

  </div>

<?php require_once __DIR__ . '/footer.php'; ?>

Questo è il codice, nel div "campo" ho messo la formazione 433 solo che io vorrei fare in modo da selezionare la formazione e mi compaiono nei punti giusti i select box..

**valient13** · 15-05-2012, 15:04

questo è l'esempio
Nome: esempio.jpg
Visite: 45
Dimensione: 65.3 KB

**criric** · 15-05-2012, 15:23

Forse potresti provare qualcosa di questo tipo:

Codice HTML:

<script type="text/javascript">
    function cambia_campo(formazione) {
        var numero_formazioni = 3;
        for(var i=0;i<numero_formazioni;i++) {
            if(i==formazione) {
                document.getElementById('campo_' + i).style.display = 'inline';
            }else{
                document.getElementById('campo_' + i).style.display = 'none';
            }
        }
    }
</script>

<select name="formazione" onchange="cambia_campo(this.options[this.selectedIndex].value)">
    <option value="0">Scegli la formazione</option>
    <option value="1">433</option>
    <option value="2">343</option>
</select>
<br/><br/>
<div id="campo_0">
    Formazione 442
</div>
<div id="campo_1" style="display:none">
    Formazione 433
</div>
<div id="campo_2" style="display:none">
    Formazione 343
</div>

Crei tutti i campi con le varie formazioni e li nascondi con display none
all onchange della select cambi lo stile al campo selezionato mostrandolo e nascondi gli altri con un ciclo in javascript

è la priam idea che mi è venuta Valuta

**criric** · 15-05-2012, 15:34

Seconda idea:

Codice PHP:


<script type="text/javascript">
    function cambia_campo(formazione) {
        switch(formazione) {
            case '1':
                location.href='?campo=1';
                break;
            case '2':
                location.href='?campo=2';
                break;
            default:
                location.href='?campo=0';
                break;
        }
    }
</script>
<select name="formazione" onchange="cambia_campo(this.options[this.selectedIndex].value)">
    <option value="0">Scegli la formazione</option>
    <option value="1">433</option>
    <option value="2">343</option>
</select>
<br/><br/>
<div id="campo">
    <?php
    if (isset($_GET['campo'])) {
        switch ($_GET['campo']) {
            case 1:
                include '433.php';
                break;
            case 2:
                include '343.php';
                break;
            default:
                include '442.php';
                break;
        }
    } else {
        include '442.php';
    }
    ?>
</div>

visto che usi php potresti crearti un file per ogni formazione e includerlo in base alla select

non ho testato

ho corretto qualche errorino di sintassi

Discussione: Formazione che cambia

Strumenti Discussione

Visualizzazione

Formazione che cambia

Tag per Questa Discussione

Permessi di Scrittura