Last active
July 3, 2024 08:48
-
-
Save Matteo182/c08fc8deb11b40f5707d5c9e340744e1 to your computer and use it in GitHub Desktop.
Select cascade Province italiane e comuni jquery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<-- Esempio parte in HTML --> | |
<div style="margin-top:3rem;" class="row"> | |
<label for="billing_address">(È richiesto indirizzo completo)*</label> | |
<!-- select delle province --> | |
<div class="col-md-4 "> | |
<div class="form-group"> | |
<select class="select form-control user-success" placeholder="Provincia" required="required" id="address_state"> | |
<option value="Agrigento">Agrigento</option> | |
<option value="Alessandria">Alessandria</option> | |
<option value="Ancona">Ancona</option> | |
<option value="Arezzo">Arezzo</option> | |
<option value="Ascoli Piceno">Ascoli Piceno</option> | |
<option value="Asti">Asti</option> | |
<option value="Avellino">Avellino</option> | |
<option value="Bari">Bari</option> | |
<option value="Barletta-Andria-Trani">Barletta-Andria-Trani</option> | |
<option value="Belluno">Belluno</option> | |
<option value="Benevento">Benevento</option> | |
<option value="Bergamo">Bergamo</option> | |
<option value="Biella">Biella</option> | |
<option value="Bologna">Bologna</option> | |
<option value="Bolzano">Bolzano</option> | |
<option value="Brescia">Brescia</option> | |
<option value="Brindisi">Brindisi</option> | |
<option value="Cagliari">Cagliari</option> | |
<option value="Caltanissetta">Caltanissetta</option> | |
<option value="Campobasso">Campobasso</option> | |
<option value="Caserta">Caserta</option> | |
<option value="Catania">Catania</option> | |
<option value="Catanzaro">Catanzaro</option> | |
<option value="Chieti">Chieti</option> | |
<option value="Como">Como</option> | |
<option value="Cosenza">Cosenza</option> | |
<option value="Cremona">Cremona</option> | |
<option value="Crotone">Crotone</option> | |
<option value="Cuneo">Cuneo</option> | |
<option value="Enna">Enna</option> | |
<option value="Fermo">Fermo</option> | |
<option value="Ferrara">Ferrara</option> | |
<option value="Firenze">Firenze</option> | |
<option value="Foggia">Foggia</option> | |
<option value="Forlì">Forlì-Cesena</option> | |
<option value="Frosinone">Frosinone</option> | |
<option value="Genova">Genova</option> | |
<option value="Gorizia">Gorizia</option> | |
<option value="Grosseto">Grosseto</option> | |
<option value="Imperia">Imperia</option> | |
<option value="Isernia">Isernia</option> | |
<option value="La Spezia">La Spezia</option> | |
<option value="L'Aquila">L'Aquila</option> | |
<option value="Latina">Latina</option> | |
<option value="Lecce">Lecce</option> | |
<option value="Lecco">Lecco</option> | |
<option value="Livorno">Livorno</option> | |
<option value="Lodi">Lodi</option> | |
<option value="Lucca">Lucca</option> | |
<option value="Macerata">Macerata</option> | |
<option value="Mantova">Mantova</option> | |
<option value="Massa-Carrara">Massa-Carrara</option> | |
<option value="Matera">Matera</option> | |
<option value="Messina">Messina</option> | |
<option value="Milano">Milano</option> | |
<option value="Modena">Modena</option> | |
<option value="Monza e della Brianza">Monza e della Brianza</option> | |
<option value="Napoli">Napoli</option> | |
<option value="Novara">Novara</option> | |
<option value="Nuoro">Nuoro</option> | |
<option value="Ogliastra">Ogliastra</option> | |
<option value="Oristano">Oristano</option> | |
<option value="Padova">Padova</option> | |
<option value="Palermo">Palermo</option> | |
<option value="Parma">Parma</option> | |
<option value="Pavia">Pavia</option> | |
<option value="Perugia">Perugia</option> | |
<option value="Pesaro e Urbino">Pesaro e Urbino</option> | |
<option value="Pescara">Pescara</option> | |
<option value="Piacenza">Piacenza</option> | |
<option value="Pisa">Pisa</option> | |
<option value="Pistoia">Pistoia</option> | |
<option value="Pordenone">Pordenone</option> | |
<option value="Potenza">Potenza</option> | |
<option value="Prato">Prato</option> | |
<option value="Ragusa">Ragusa</option> | |
<option value="Ravenna">Ravenna</option> | |
<option value="Reggio Calabria">Reggio Calabria</option> | |
<option value="Reggio nell'Emilia">Reggio nell'Emilia</option> | |
<option value="Rieti">Rieti</option> | |
<option value="Rimini">Rimini</option> | |
<option value="Roma">Roma</option> | |
<option value="Rovigo">Rovigo</option> | |
<option value="Salerno">Salerno</option> | |
<option value="Sassari">Sassari</option> | |
<option value="Savona">Savona</option> | |
<option value="Siena">Siena</option> | |
<option value="Siracusa">Siracusa</option> | |
<option value="Sondrio">Sondrio</option> | |
<option value="Sud Sardegna">Sud Sardegna</option> | |
<option value="Taranto">Taranto</option> | |
<option value="Teramo">Teramo</option> | |
<option value="Terni">Terni</option> | |
<option value="Torino">Torino</option> | |
<option value="Trapani">Trapani</option> | |
<option value="Trento">Trento</option> | |
<option value="Treviso">Treviso</option> | |
<option value="Trieste">Trieste</option> | |
<option value="Udine">Udine</option> | |
<option value="Valle d'Aosta">Valle d'Aosta</option> | |
<option value="Varese">Varese</option> | |
<option value="Venezia">Venezia</option> | |
<option value="Verbano-Cusio-Ossola">Verbano-Cusio-Ossola</option> | |
<option value="Vercelli">Vercelli</option> | |
<option value="Verona">Verona</option> | |
<option value="Vibo Valentia">Vibo Valentia</option> | |
<option value="Vicenza">Vicenza</option> | |
<option value="Viterbo">Viterbo</option> | |
</select> | |
</div> | |
</div> | |
<!-- select dei comuni --> | |
<div class="col-md-4 "> | |
<div class="form-group"> | |
<select class="select form-control" placeholder="Città" required="required" id="address_city" disabled> | |
<option value="">Seleziona comune</option> | |
</select> | |
</div> | |
</div> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$( document ).ready(function() { | |
// Carico il json dei comuni | |
var comuni_api='comuni.json'; | |
$.getJSON( comuni_api,{dataType: 'jsonp'}) | |
.done(function( data ) { | |
// intercetto evento select province change | |
$('select#address_state').on('change', function (e) { | |
var optionSelected = $("option:selected", this); | |
var provincia = this.value; | |
var comune_obj = data[provincia]; | |
seleziono_comuni_per_province(provincia, comune_obj) | |
}); | |
}) | |
.fail(function( jqxhr, textStatus, error ) { | |
var err = textStatus + ", " + error; | |
console.log( "Request Failed: " + err + "-" + comuni_api + "--" + jqxhr); | |
}) | |
}); | |
// preno dcomini jsono e li appendo alla select | |
function prendo_comuni(){ | |
$.getJSON( "comuni.json", function( data ) { | |
$.each( data, function( key, val ) { | |
$( "#address_city" ).append("<option data-province='" + val.provincia.nome + "' value='" + val.nome + "'>" + val.nome + "</option>"); | |
}); | |
}); | |
}; | |
// seleziona i comuni della provincia selezionata | |
function seleziono_comuni_per_province(provincia, comune_obj){ | |
// var province = $("#donation_billing_address_state").find('option:selected').text(); // stores province | |
//console.log(provincia + ' -> '); | |
var $newoptions =''; | |
Object.getOwnPropertyNames(comune_obj).forEach( | |
function (val, idx, array) { | |
//console.log(comune_obj[val].nome); | |
// creao le option dei comuni | |
if (comune_obj[val].nome != undefined){ | |
$newoptions +="<option data-province='" + escape(provincia) + "' value='" + comune_obj[val].nome + "'>" + comune_obj[val].nome + "</option>"; | |
} | |
}); | |
// appendo le option dei comuni alla selct comuni | |
$("#address_city").html($newoptions); | |
$("#address_city").removeAttr("disabled"); // enables select | |
} |
This file has been truncated, but you can view the full file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
improved algorithm performance