JSFiddle - React, Tailwind, and code Playground
HTML
<select name='firstLevelParts' id='select1'>
<option value = '1'>Terræn</option>
<option value = '2'>Fundamentsystem</option>
<option value = '3'>Vægsystem</option>
<option value = '4'>Dæksystem</option>
<option value = '5'>Tagsystem</option>
</select>
<select name='secondLevelParts' id='select2'>
<option value='1'>Jordprofil</option>
<option value='2'>Befæstet Areal</option>
<option value='3'>Beplantning</option>
<option value='1'>Fundamentkonstruktion</option>
<option value='2'>Bærelag</option>
<option value='3'>Åbning</option>
<option value='4'>Lukning</option>
<option value='5'>Inddækning</option>
<option value='6'>Afslutning</option>
<option value='7'>Afskærmning</option>
<option value='8'>Fuge</option>
<option value='9'>Samling</option>
<option value='10'>Overflade</option>
</select>
</div>
JavaScript
$("#select1").change(function() {
if(typeof $(this).data('options') === "undefined"){
$(this).data('options',$('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
console.log('1');
});
$("#select1").trigger('change');