Formazione che cambia

valient13

Utente Attivo
6 Apr 2012
96
0
0
Sicilia
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:
343.jpg
mentre se scelgo 343 mi compare:
433.jpg

come potrei farlo?
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao
se sono immagini che devi cambiare potresti fare cosi:

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

Utente Attivo
6 Apr 2012
96
0
0
Sicilia
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Puoi postare la struttura del div?
 

valient13

Utente Attivo
6 Apr 2012
96
0
0
Sicilia
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..
 

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Forse potresti provare qualcosa di questo tipo:

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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Seconda idea:

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
 
Ultima modifica: