Select dinamica con link

Vai ai contenuti

Menu principale:

OK
Proprietà Pagina - Esperto - Prima della chiusura del tag HEAD
<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>
Oggetto Codice HTML
<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>
Oggetto Codice HTML - Esperto
.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%;
  }
}
Torna ai contenuti | Torna al menu