Menu principale:
<script>
$(document).ready(function() {
$('.select_dyn select').change(function() {
if ($(this).attr('id') == 'select1') {
var sel1 = $("#select1").val();
var sel2 = $("#select2");
$("#select2 option").remove();
if (sel1 == 1) {
sel2.append("<option value='como.html'>Como</option>");
sel2.append("<option value='milano.html'>Milano</option>");
sel2.append("<option value='varese.html'>Varese</option>");
} else if (sel1 == 2) {
sel2.append("<option value='firenze.html'>Firenze</option>");
sel2.append("<option value='lucca.html'>Lucca</option>");
sel2.append("<option value='pistoia.html'>Pistoia</option>");
}
}
var citta = $('#select2').val();
$('#link').attr('href', citta);
});
});
</script>
<form name="form">
<div class="select_dyn">
<span class="arrow"></span>
<select id="select1">
<option value="">Seleziona Regione...</option>
<option value="1">Lombardia</option>
<option value="2">Toscana</option>
</select>
</div>
<div class="select_dyn">
<span class="arrow"></span>
<select id="select2">
<option value="">-</option>
</select>
</div>
<div>
<a id="link" href="#nogo">OK</a>
</div>
</form>
.select_dyn {
position: relative;
display: inline-block;
border: 2px solid #7C7C7C;
border-radius: 6px;
width: 49%;
margin-bottom: 20px;
box-sizing: border-box;
}
.select_dyn select {
outline: none;
-webkit-appearance: none;
padding: 0.2em;
margin: 0;
border: 5px solid #F2F2F2;
border-radius: 6px;
background: #F2F2F2;
color: #000;
width: 100%;
font-size: 20px;
}
.select_dyn select::-ms-expand {
display: none;
}
.select_dyn .arrow {
background: #F2F2F2;
bottom: 5px;
position: absolute;
right: 5px;
top: 5px;
width: 50px;
pointer-events: none;
}
.select_dyn .arrow:before {
content: '';
position: absolute;
top: 50%;
right: 8px;
margin-top: -5px;
pointer-events: none;
border-top: 10px solid #333333;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
}
.select_dyn .arrow:after {
content: '';
position: absolute;
top: 50%;
right: 28px;
margin-top: -5px;
pointer-events: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
}
#link {
display: inline-block;
text-decoration: none;
background-color: #0078F0;
border-radius: 6px;
box-sizing: content-box;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 0.5em;
box-sizing: border-box;
width: 98%;
}
@media (max-width: 719px) {
.select_dyn {
width: 100%;
}
}