Formazione che cambia
- Creatore Discussione valient13
- Data di inizio
Ciao
se sono immagini che devi cambiare potresti fare cosi:
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>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
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..
Forse potresti provare qualcosa di questo tipo:
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
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
Seconda idea:
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
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:
Discussioni simili
