JSFiddle - React, Tailwind, and code Playground
HTML
<div class="form-group input select standort">
<label class="control-label col-md-2" for="standort-id">Standort</label>
<div class="col-md-6">
<select name="standort_id" class="select2 form-control" id="standort-id">
<option value="1" selected="selected">Erkrath</option>
</select>
</div>
</div>
<div class="form-group input select platz">
<label class="control-label col-md-2" for="platz-id">Platz</label>
<div class="col-md-6">
<select name="platz_id" placeholder="--bitte wählen--" id="platz-id" class="form-control">
<option value="1" selected="selected">Erkrath - Platz 1</option>
</select>
</div>
</div>
JavaScript
//$("#layout_select").children('option').hide();
$(function () {
var showPlatz = function(selectedStandortId){
$("#platz-id").children("option").hide();
$("#platz-id").children("option").filter(function(){
var platz = $(this).text();
return platz.indexOf(selectedStandortId)!=-1;
}).show();
//set default value
$('#platz-id option').each(function () {
if ($(this).css('display') != 'none') {
$(this).prop("selected", true);
return false;
}
});
};
//set default standort
var standort = $("#standort-id option:selected").text();
showPlatz(standort.trim());
$("#standort-id").change(function(){
var selected = $("#standort-id option:selected").text();
showPlatz(selected.trim());
});
});