Kriuchko
1/8/2019 - 10:24 AM

Two selects on change select options on change

Javascript two selects on change select options on change

—-- JS

jQuery(function() {
  initCompare();
});

function initCompare(){

  var baseUrl = 'https://canyon-swiss.myshopify.com/pages/which-suits-you/?';
  var urlEnd = '&cache=false';
  var firstSelect = '';
  var secondSelect = '';

  document.getElementById('first-select').addEventListener('change', function(){
    firstSelect = 'erstes_bike=' + this.value;
    secondSelect = 'zweites_bike=' + document.getElementById('second-select').value;

    window.location.href = baseUrl + firstSelect + '&' + secondSelect + urlEnd;
  });

  document.getElementById('second-select').addEventListener('change', function(){
    firstSelect = 'erstes_bike=' + document.getElementById('first-select').value;
    secondSelect = 'zweites_bike=' + this.value;

    window.location.href = baseUrl + firstSelect + '&' + secondSelect + urlEnd;
  });

}

—-- HTML

<div class="col">

  <select id="first-select">
    <option value="">Erstes Bike auswählen...</option>
    <option value="123" {% if erstes_bike_id == '123' %} selected="selected" {%- endif -%}>1</option>
  </select>

</div>

<div class="col">

  <select id="second-select">
    <option value="">Zweites Bike auswählen...</option>
    <option value="321" {% if zweites_bike_id == '321' %} selected="selected" {%- endif -%}>2</option>
  </select>

</div>