Dropdown menu con tabella

Frozzen

Utente Attivo
18 Gen 2019
55
0
6
32
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
3.203
207
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
55
0
6
32
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
322
21
28
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
55
0
6
32
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
55
0
6
32
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
 

zorro

Utente Attivo
20 Ott 2014
322
21
28
ROMA
Ciao Frozzen,
una volta scelta la marca ti dovrebbe comparire

1579529327596.png

Non ti compare?
 

Allegati

  • 1579529103077.png
    1579529103077.png
    4,4 KB · Visite: 364

Frozzen

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

Frozzen

Utente Attivo
18 Gen 2019
55
0
6
32
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
322
21
28
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
55
0
6
32
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
322
21
28
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
55
0
6
32
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
55
0
6
32
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
322
21
28
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
55
0
6
32
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
322
21
28
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?
 
Discussioni simili
Autore Titolo Forum Risposte Data
J Bootstrap dropdown menu non funziona con jquery-1.8.2??? jQuery 5
andre9004 Dropdown menu con .hover() jQuery 2
L Selezione da database con DropDown Menu e visualizzazione PHP 10
D Menu con immagine a stile DropDown jQuery 0
S spostare il pulsante menu dropdown HTML e CSS 8
G [Javascript] Transition in OnClick Dropdown Menu Javascript 5
L [HTML] Menu di 4 livello "dropdown menu" HTML e CSS 6
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
A Problema Menu dropdown orizzonate HTML e CSS 1
L menu dropdown orizzontale su 3 livelli. Evidenziare la voce generale HTML e CSS 0
C Roundec Corner Select ( Dropdown menu) HTML e CSS 1
W [CSS] Menù dropdown aggiungere un SUB-Menu HTML e CSS 0
psikolele Dropdown menù HTML e CSS 2
S Gestire scelta dropdown con dati da Mysql PHP 2
Alex_70 Visualizzare anteprima foto in dropdown PHP 2
felino [HTML] Font Awesome icon all'interno di una dropdown HTML e CSS 3
L Navbar dropdown con Bootstrap: link ai css CMS (Content Management System) 4
F Slide down/up dropdown Bootstrap jQuery 0
F errore select option dropdown list jQuery 15
C Login DropDown WordPress 0
C Multi DropDown... Funzionamento PHP 3
D dropdown panel con ajax e aspnet 3.5 ASP.NET 6
T problemi con dati menu a tendina HTML e CSS 2
A menu a tendina php PHP 1
M Accordion menu e posizione div HTML e CSS 0
F Menu responsive larghezza schermo HTML e CSS 2
G Colorare menu select attraverso ricerca php PHP 0
M Creazione menu a tendina Javascript 3
D menu con submenu orizzontale HTML e CSS 0
Cosina Menu fisso copre i titoli quando cliccati nel sommario jQuery Javascript 4
G creazione menu a tendina e invio a pagina php PHP 1
P Sub menu con Collapse. Javascript 0
R abilitare menu a tendina tramite relativa chekbox PHP 17
L Aiuto creazione menu mancante WordPress 0
Spown [WordPress] Problemi visualizzazione su più browser + voci menu in movimento WordPress 1
A [WordPress] Menu bar WordPress 0
W [WordPress] Non si vedono le categorie da aggiungerle al Top Menu WordPress 3
M Inviare variabili da menu a tendina a pagina php con post PHP 6
M [PHP] Selezione da menu a discesa con 2 variabili PHP 0
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
M [PHP] Creare un menu a tendina con pdo PHP 18
M [Javascript] Caricamento menu da file esterno Javascript 8
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
andreas88 [PHP] menu PHP 15
K [ASP.Net] Realizzazione menu a tendina dipendenti ASP.NET 1
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17

Discussioni simili