xxxxxxxxxx1
<select id="special_appointment_class" name="special_appointment[class]" class="mdb-select md-form"> <optgroup label="5">2
<option value="1">5a</option><option value="2">5b</option><option value="3">5c</option><option value="4">5d</option> </optgroup><optgroup label="6">3
<option value="5">6a</option><option value="6">6b</option><option value="7">6c</option> </optgroup><optgroup label="7">4
<option value="8">7a</option><option value="9">7b</option><option value="10">7c</option> </optgroup><optgroup label="8">5
<option value="11">8a</option><option value="12">8b</option><option value="13">8c</option> </optgroup><optgroup label="9">6
<option value="14">9a</option><option value="15">9b</option> </optgroup>7
</select>8
<select id="special_appointment_student" name="special_appointment[student]" class="mdb-select md-form" data-stop-refresh='true'> 9
<optgroup label="5a">10
<option value="1">Mia Müller</option><option value="2">Milan Schmidt</option> 11
</optgroup>12
<optgroup label="5b">13
<option value="4">Leon Fischer</option><option value="3">Emilia Schneider</option> 14
</optgroup>15
<optgroup label="5c">16
<option value="5">Lina Meyer</option><option value="6">Noah Weber</option> 17
</optgroup>18
<optgroup label="5d">19
<option value="7">Emma Hofmann</option><option value="8">Jonas Wagner</option> 20
</optgroup>21
<optgroup label="6a">22
<option value="9">Lara Becker</option><option value="10">Ben Schulz</option> 23
</optgroup><optgroup label="6b">24
<option value="12">Elias Koch</option><option value="11">Lea Schäfer</option> 25
</optgroup>26
<optgroup label="6c">27
<option value="13">Mila Bauer</option><option value="14">Adam Richter</option> 28
</optgroup><optgroup label="7a">29
<option value="15">Ella Klein</option><option value="16">Felix Schröder</option> 30
</optgroup>31
<optgroup label="7b">32
<option value="18">Maximilian Neumann</option><option value="17">Lia Wolf</option> 33
</optgroup><optgroup label="7c">34
<option value="20">Amir Schmitz</option><option value="19">Sophia Schwarz</option> 35
</optgroup>36
<optgroup label="8a">37
<option value="22">Finn Braun</option><option value="21">Charlotte Krüger</option> 38
</optgroup>39
<optgroup label="8b">40
<option value="24">Liam Schmitt</option><option value="23">Emily Zimmermann</option> 41
</optgroup>42
<optgroup label="8c">43
<option value="26">Paul Hartmann</option><option value="25">Elif Lange</option> 44
</optgroup>45
<optgroup label="9a">46
<option value="27">Maria Hofmann</option><option value="28">Mohammed Kause</option> 47
</optgroup>48
<optgroup label="9b">49
<option value="30">Ali Meier</option><option value="29">Sophie Werner</option> 50
</optgroup>51
</select>1
1
xxxxxxxxxx1
$(function() {2
3
const classSelect = $('#special_appointment_class');4
const studentSelect = $('#special_appointment_student');5
const studentSelectClone = studentSelect.clone();6
classSelect.materialSelect();7
studentSelect.materialSelect();8
9
classSelect.on(10
'change',11
function () {12
let className = $(this).find('option:selected').text();13
14
if (classSelect.val() > 0) {15
studentSelect.find('optgroup').remove();16
studentSelect.append(studentSelectClone.find("optgroup[label='" + className + "']").clone());17
} else {18
studentSelect.find('optgroup').remove();19
studentSelect.append(studentSelectClone.find("optgroup").clone());20
}21
}22
)23
}); Console errors: 0