$(document).on( 'click', '#mark', function() {
var markValue = $( "#mark option:selected" ).val();
selectModel = { "1": "A4", "2": "A6", "3": "A8" };
selectModel2 = { "1": "Mercedes-Benz A-klasse (176)", "2": "Mercedes-Benz C-klasse (W205)", "3": "E-klasse (W212)" };
// var array = {selectModel1, selectModel2};
$('#model').empty();
$.each(selectModel, function(key, value) {
$('#model')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
});
$('.header-select[name="country"]').on('change', function () {
let countryOptionSelected = $(
'.header-select[name="country"] > option:selected'
);
let cityOption = $('.header-select[name="city"] > option');
cityOption.each(function () {
if ($(this).data('id') == countryOptionSelected.data('id')) {
$(this).addClass('show');
} else {
$(this).removeClass('show');
}
});
$('.header-select[name="city"] option').prop('selected', false);
$('.header-select[name="city"] .show:first').prop('selected', true);
if (countryOptionSelected.hasClass('default')) {
cityOption.each(function () {
if ($(this).hasClass('show') == false) {
$(this).addClass('show');
}
});
}
});<select class="header-select" name="country">
<option class="default" value="">Country</option>
<option data-id="16" value="austria">Austria</option>
<option data-id="8" value="germany">Germany</option>
<option data-id="23" value="switzerland">Switzerland</option>
</select>
<select class="header-select" name="city">
<option class="show" value="">All cities</option>
<option class="show" data-id="16" value="wien">Wien</option>
<option class="show" data-id="8" value="berlin">Berlin</option>
<option class="show" data-id="8" value="dresden">Dresden</option>
<option class="show" data-id="8" value="hamburg">Hamburg</option>
<option class="show" data-id="23" value="bremgarten">Bremgarten</option>
</select>
<style>
select[name='city'] {
option {
display: none;
&.show {
display: block;
}
}
}
</style>