Volete creare un elenco a discesa come quello che vedete qui sopra? Allora questa guida fa per voi :)
Benvenuti a questa guida su come cerare un menu a tendina / discesa con una lista delle province italiane. Questa guida vi mostrerà come cerare il codice HTML e come ottenere la provincia selezionata con del codice JavaScript.
Cominciamo subito!
Creare il Menu HTML con le province italiane.
Per creare un elenco delle province che permette all'utente di selezionare un valore, possiamo fare uso del tag HTML <select> . Il tag <select></select> può contenere dei tag <option> , che andranno a formare i valori (province) del menu a tendina.
Per evitarvi di scrivere tutte le province manualmente potete copiare il codice per questo elenco qui:
<select id="province"><option value="”ag”">agrigento</option><option value="”al”">alessandria</option><option value="”an”">ancona</option><option value="”ao”">aosta</option><option value="”ar”">arezzo</option><option value="”ap”">ascoli piceno</option><option value="”at”">asti</option><option value="”av”">avellino</option><option value="”ba”">bari</option><option value="”bt”">barletta-andria-trani</option><option value="”bl”">belluno</option><option value="”bn”">benevento</option><option value="”bg”">bergamo</option><option value="”bi”">biella</option><option value="”bo”">bologna</option><option value="”bz”">bolzano</option><option value="”bs”">brescia</option><option value="”br”">brindisi</option><option value="”ca”">cagliari</option><option value="”cl”">caltanissetta</option><option value="”cb”">campobasso</option><option value="”ci”">carbonia-iglesias</option><option value="”ce”">caserta</option><option value="”ct”">catania</option><option value="”cz”">catanzaro</option><option value="”ch”">chieti</option><option value="”co”">como</option><option value="”cs”">cosenza</option><option value="”cr”">cremona</option><option value="”kr”">crotone</option><option value="”cn”">cuneo</option><option value="”en”">enna</option><option value="”fm”">fermo</option><option value="”fe”">ferrara</option><option value="”fi”">firenze</option><option value="”fg”">foggia</option><option value="”fc”">forli’-cesena</option><option value="”fr”">frosinone</option><option value="”ge”">genova</option><option value="”go”">gorizia</option><option value="”gr”">grosseto</option><option value="”im”">imperia</option><option value="”is”">isernia</option><option value="”sp”">la spezia</option><option value="”aq”">l’aquila</option><option value="”lt”">latina</option><option value="”le”">lecce</option><option value="”lc”">lecco</option><option value="”li”">livorno</option><option value="”lo”">lodi</option><option value="”lu”">lucca</option><option value="”mc”">macerata</option><option value="”mn”">mantova</option><option value="”ms”">massa-carrara</option><option value="”mt”">matera</option><option value="”vs”"> medio campidano</option><option value="”me”">messina</option><option value="”mi”">milano</option><option value="”mo”">modena</option><option value="”mb”">monza e della brianza</option><option value="”na”">napoli</option><option value="”no”">novara</option><option value="”nu”">nuoro</option><option value="”og”">ogliastra</option><option value="”ot”">olbia-tempio</option><option value="”or”">oristano</option><option value="”pd”">padova</option><option value="”pa”">palermo</option><option value="”pr”">parma</option><option value="”pv”">pavia</option><option value="”pg”">perugia</option><option value="”pu”">pesaro e urbino</option><option value="”pe”">pescara</option><option value="”pc”">piacenza</option><option value="”pi”">pisa</option><option value="”pt”">pistoia</option><option value="”pn”">pordenone</option><option value="”pz”">potenza</option><option value="”po”">prato</option><option value="”rg”">ragusa</option><option value="”ra”">ravenna</option><option value="”rc”">reggio di calabria</option><option value="”re”">reggio nell’emilia</option><option value="”ri”">rieti</option><option value="”rn”">rimini</option><option value="”rm”">roma</option><option value="”ro”">rovigo</option><option value="”sa”">salerno</option><option value="”ss”">sassari</option><option value="”sv”">savona</option><option value="”si”">siena</option><option value="”sr”">siracusa</option><option value="”so”">sondrio</option><option value="”ta”">taranto</option><option value="”te”">teramo</option><option value="”tr”">terni</option><option value="”to”">torino</option><option value="”tp”">trapani</option><option value="”tn”">trento</option><option value="”tv”">treviso</option><option value="”ts”">trieste</option><option value="”ud”">udine</option><option value="”va”">varese</option><option value="”ve”">venezia</option><option value="”vb”">verbano-cusio-ossola</option><option value="”vc”">vercelli</option><option value="”vr”">verona</option><option value="”vv”">vibo valentia</option><option value="”vi”">vicenza</option><option value="”vt”">viterbo</option> </select>
Questo codice può essere inserito all’interno di una form HTML.
Ora vediamo come ottenere la selezione della provincia dell’utente con JavaScript.
var p = document.getElementById("province");
var provincia = p.options[p.selectedIndex].value;
console.log(provincia);Come potete vedere eseguiamo del codice JavaScript che trova l’elemento <select> con id=”province” e assegna la provincia selezionata alla variabile “provincia”.
Possiamo utilizzare questo codice all’interno di form per registrazione utente, form per spedizione di un acquisto online, etc...
Fatemi sapere come avete utilizzato questo codice nella sezione commenti e se questo post vi è stato di aiuto mettete mi piace e condividete la pagina con i vostri amici. Grazie e alla prossima :)
