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>