Select dinamica con ricerca

<script>
  $(document).ready(function() {
    $('.select_dyn select').change(function() {
      if ($(this).attr('id') == 'select1') {
        var sel1 = $("#select1").val();
        var sel2 = $("#select2");
        $("#select2 option").remove();
        //quadrato
        if (sel1 == 1) {
          sel2.append("<option value='giallo'>Giallo</option>");
          sel2.append("<option value='nero'>Nero</option>");
          sel2.append("<option value='rosso'>Rosso</option>");
          //triangolo
        } else if (sel1 == 2) {
          sel2.append("<option value='blu'>Blu</option>");
          sel2.append("<option value='rosso'>Rosso</option>");
          sel2.append("<option value='verde'>Verde</option>");
        }
      }
      var forma = $('#select1 option:selected').text();
      var colore = $('#select2').val();

      // funzionalità offline
      if (location.host == "127.0.0.1:8080")
        $('#link').attr('onclick', 'alert("La funzione sarà attiva solo quando il Sito verrà pubblicato online.")');

      else
        $('#link').attr('href', 'imsearch.php?search=' + forma + '+' + colore + '&type=images');
    });
  });
</script>

<form name="form">
  <div class="select_dyn">
    <span class="arrow"></span>
    <select id="select1">
      <option value="">Seleziona forma...</option>
      <option value="1">Quadrato</option>
      <option value="2">Triangolo</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">CERCA</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%;
  }
}