Dropdown menu con tabella

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Buon giorno a tutti, vorrei che quando vado a selezionare in questo caso un campo del menu mi esca una tabella inerente a quello che ho selezionato.. qualcuno riesce ad aiutarmi? grazie mille

HTML:
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
 

marino51

Utente Attivo
28 Feb 2013
2.672
135
63
Lombardia
un metodo con jquery/ajax

nella pagina dove esiste la select,
puoi intercettare la scelta fatta con la "select" usando jquery in javascript,
attivare una funzione ajax
che avvia uno script php a cui viene passato il parametro selezionato,
lo script php compone la tabella da visualizzare,
che restituita al "success" di ajax,
viene visualizzata in un div presente nella pagina
tutto qui

scrivi il codice necessario e se hai problemi fatti vivo
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Grazie per avermi schiaritocle idee, purtroppo l'unico codice al momento in possesso è quello citato.. avrei bisogno di qualcuno che mi aiuti a creare l'esempio, poi modifico io personalmente..
 

zorro

Utente Attivo
20 Ott 2014
231
10
18
ROMA
Ciao Frozzen,
ho realizzato uno script (in realtà è + di uno) che dovrebbe fare quello che chiedi, sempre che abbia ben interpretato ciò che intendi fare. Prima di mandartelo però ti mando un link dove puoi vedere un'anteprima. Tieni presente che è molto stilizzato e che, essendo presente anche uno script jQuery devi o scaricare la libreria ed inserire un link alla libreria stessa (come nel mio caso) o inserire un link che la scarichi direttamente da internet. Fammi sapere Ciao


Zorro
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Ciao Frozzen,
ho realizzato uno script (in realtà è + di uno) che dovrebbe fare quello che chiedi, sempre che abbia ben interpretato ciò che intendi fare. Prima di mandartelo però ti mando un link dove puoi vedere un'anteprima. Tieni presente che è molto stilizzato e che, essendo presente anche uno script jQuery devi o scaricare la libreria ed inserire un link alla libreria stessa (come nel mio caso) o inserire un link che la scarichi direttamente da internet. Fammi sapere Ciao


Zorro
Ciao zorro, grazie dell'aiuto! Aprendo il link non riesco però a vedere una libreria alla selezione di una marca. Riesci a farmi vedere bene con la libreria anche con un esempio? Grazie mille per l'aiuto!
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Ciao Frozzen,
cosa intendi con vedere bene con la libreria?
Perché ho visto la pagina che mi hai creato ma non vedo i risultato se vado a selezionare un tipo di marca.. vorrei che quando vado a selezionare una marca cambi il risultato sottostante come se fosse una descrizione per quel tipo di marca.. non so se mi sono spiegato
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Ciao Zorro,
pensavo fosse magari perchè lo aprivo dal cellulare, ma effettivamente anche dal pc non appare nulla..
Immagine.png
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.005
295
83

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
CONFERMO che funziona! Ma funziona solo con IE e non con Chrome :p

Quello che cercavo ZORRO è proprio questo!!
Se ti va di inviarmi il progetto ti sarei grato.. Grazie mille ancora!
 

zorro

Utente Attivo
20 Ott 2014
231
10
18
ROMA
Si, in effetti anche a me non funziona con chrome, non so perché: io comunqe uso, e non mi ha mai dato problemi Mozilla Firefox. Il progetto te lo posso mandare senza problemi ma, avendolo memorizzato sul pc dell'ufficio, non prima di domani
A presto


Zorro
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Si, in effetti anche a me non funziona con chrome, non so perché: io comunqe uso, e non mi ha mai dato problemi Mozilla Firefox. Il progetto te lo posso mandare senza problemi ma, avendolo memorizzato sul pc dell'ufficio, non prima di domani
A presto


Zorro
Va benissimo Zorro, non ti preoccupare se me lo invii domani! Ti ringrazio molto, grazie dell'aiuto
 

zorro

Utente Attivo
20 Ott 2014
231
10
18
ROMA
Ciao Frozzen,
ti mando il progetto:


FORM.html
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<title></title>
</head>

<body>

Scegli una  marca:
<select>
  <option value="  ">Effettua una selezione</option>
  <option value="volvo" onclick="marca(this)">Volvo</option>
  <option value="saab" onclick="marca(this)">Saab</option>
  <option value="opel" onclick="marca(this)">Opel</option>
  <option value="audi" onclick="marca(this)">Audi</option>
</select>
<div id="tabella"></div>

<script>
function marca(pippo) {
    var scelta = pippo.value;
    $(document).ready(function() {
                $.ajax({
                     type:  'post',
                     cache: false,
                     url:  'tabelle.php',
                     data: 'query='+scelta,
                     success:function(html) {
                          $('#tabella').html(html);
                     },
                     error: function(request, status, error) {
                          $('#tabella').html('<br />ERRORE : il server non risponde o lo ha fatto in modo anomalo '+request.responseText);
                     }
                });
    
    });
}
</script>
</body>
</html>
e tabelle.php

PHP:
<?php
$scelta = $_POST['query'];

//echo 'La tua scelta è sulla marca: '.$scelta;
switch ($scelta) {
    case volvo:
        echo '<br><br><b>Marca: </b>Volvo<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>5s<br><b>Velocità max: </b>150 km/h';
        break;
    case saab:
        echo '<br><br><b>Marca: </b>Saab<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>10s<br><b>Velocità max: </b>200 km/h';
        break;
    case opel:
        echo '<br><br><b>Marca: </b>Opel<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>20s<br><b>Velocità max: </b>250 km/h';
        break;
    case audi:
        echo '<br><br><b>Marca: </b>Audi<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>30s<br><b>Velocità max: </b>300 km/h';
        break;
}
?>

Come vedi, come suggeriva anche Marino, ho aggiunto al tuo progetto alcuni script javaScript e jQuery. Per javaScript non c'è problema, mentre per eseguire jQuery è richiesto lo scaricamento dell'apposita libreria, ed è questo il motivo del link

HTML:
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

A presto


Zorro
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Ciao Frozzen,
ti mando il progetto:


FORM.html
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<title></title>
</head>

<body>

Scegli una  marca:
<select>
  <option value="  ">Effettua una selezione</option>
  <option value="volvo" onclick="marca(this)">Volvo</option>
  <option value="saab" onclick="marca(this)">Saab</option>
  <option value="opel" onclick="marca(this)">Opel</option>
  <option value="audi" onclick="marca(this)">Audi</option>
</select>
<div id="tabella"></div>

<script>
function marca(pippo) {
    var scelta = pippo.value;
    $(document).ready(function() {
                $.ajax({
                     type:  'post',
                     cache: false,
                     url:  'tabelle.php',
                     data: 'query='+scelta,
                     success:function(html) {
                          $('#tabella').html(html);
                     },
                     error: function(request, status, error) {
                          $('#tabella').html('<br />ERRORE : il server non risponde o lo ha fatto in modo anomalo '+request.responseText);
                     }
                });
   
    });
}
</script>
</body>
</html>
e tabelle.php

PHP:
<?php
$scelta = $_POST['query'];

//echo 'La tua scelta è sulla marca: '.$scelta;
switch ($scelta) {
    case volvo:
        echo '<br><br><b>Marca: </b>Volvo<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>5s<br><b>Velocità max: </b>150 km/h';
        break;
    case saab:
        echo '<br><br><b>Marca: </b>Saab<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>10s<br><b>Velocità max: </b>200 km/h';
        break;
    case opel:
        echo '<br><br><b>Marca: </b>Opel<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>20s<br><b>Velocità max: </b>250 km/h';
        break;
    case audi:
        echo '<br><br><b>Marca: </b>Audi<br><b>Modello: </b>......<br><b>Tempo 0-100: </b>30s<br><b>Velocità max: </b>300 km/h';
        break;
}
?>

Come vedi, come suggeriva anche Marino, ho aggiunto al tuo progetto alcuni script javaScript e jQuery. Per javaScript non c'è problema, mentre per eseguire jQuery è richiesto lo scaricamento dell'apposita libreria, ed è questo il motivo del link

HTML:
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

A presto


Zorro

Ho provato il codice e che dire... GRAZIE, è proprio quello che cercavo e che non riuscivo a fare..
Ora mi rimane solo da capire perchè non si vede su chrome e i vari browser!

Grazie ancora ZORRO
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Ciao Zorro, avrei una piccola richiesta da farti.. è possibile modificare il codice andando a pescare ogni file .php diverso inerente alla squadra che selezioni?

Grazie, Davide.
 

zorro

Utente Attivo
20 Ott 2014
231
10
18
ROMA
è possibile modificare il codice andando a pescare ogni file .php diverso inerente alla squadra che selezioni?
Cosa intendi esattamente? Non è molto chiaro (x squadra intendi la marca)
 

Frozzen

Utente Attivo
18 Gen 2019
49
0
6
28
Milano
Cosa intendi esattamente? Non è molto chiaro
Praticamente, in base alla scelta che viene fatta esempio, "milan" lui va a pescare i dati in:

tabelle.php
PHP:
                     cache: false,
                     url:  'tabelle.php',
                     data: 'query='+scelta,
vorrei che in base alla scelta, mi pescasse i dati, in questo caso in milan.php e via dicendo con le successive squadre..
 

zorro

Utente Attivo
20 Ott 2014
231
10
18
ROMA
In pratica, se ho ben capito, attualmente, una volta effettuata la scelta vieni indirizzato su marche.it (che è il file che 'intercetta' la tua scelta e che quindi non è possibili eliminare) che contiene tutte e quattro le marche (o squadre). Tu vorresti avere invece quattro file separati, uno per ogni marca/squadra e, una volta effettuata la scelta, marche.it ti indirizzasse verso il file appropriato. E' giusto, ho capito bene?