Grupowanie elemetnów na liście rozwijanej

[bubumat]

Witam,

mam dwie listy rozwijalne w 1-wszej nazwy marek aut, w 2-giej modele. W jaki spsób zrobić żeby np. po wybraniu z pierwszej listy "audi" pojawiały się modele tego producenta. Teraz to jest wyszystko wymieszane. Czy to value option przypisać jakiś parametr, użyć JS? Dane wczytywane są z tabeli MySQL

[kubaj]

Wklej tutaj kod HTML jaki Ci się generuje już po wczytaniu z MySQLa

[bubumat]

Wklej tutaj kod HTML jaki Ci się generuje już po wczytaniu z MySQLa

Powidzemy, że kod tak będzie wyglądał

<p>Marka:
<select id="marki" name="marka">
<option value="alfa">Alfa Romeo</option>
<option value="audi">Audi</option>
<option value="bmw">BMW</option>
</select>
</p>

<p>Model:
<select id="modele" name="model">
<option value="145/146" class="alfa">145/146</option>
<option value="147" class="alfa">147</option>
<option value="A3" class="audi">A3</option>
<option value="A4" class="audi">A4</option>
<option value="E36" class="bmw">e36</option>
<option value="E46" class="bmw">e46</option>
</select>

Poniżej przykład z jQuery ale to działa tylko jak są 2 modele. Później nie bardzo wiem co przypisać do tego selektora (".klasa").remove(); ew. może jakieś inne rozwiązanie

<select id="marki">
<option value="alfa">Alfa Romeo</option>
<option value="audi">Audi</option>
</select>

<select id="modele">
<option value="147" class="alfa">147</option>
<option value="155" class="alfa">155</option>
<option value="166" class="alfa">166</option>
<!-- Opcje dodawane przez jQuery
<option value="A4" class="audi">A4</option>
<option value="A6" class="audi">A6</option>
<option value="A8" class="audi">A8</option>
-->
</select>


$('#marki').change(function() {
switch( $(this).val() ) {
case 'audi':
$(".alfa").remove();
$("#modele").append("<option value=\"A4\" class=\"audi\">A4</option><option value=\"A6\" class=\"audi\">A6</option><option value=\"A8\" class=\"audi\">A8</option>");
break;
case 'alfa':
$(".audi").remove();
$("#modele").append("<option value=\"147\" class=\"alfa\">147</option><option value=\"155\" class=\"alfa\">155</option><option value=\"166\" class=\"alfa\">166</option>");
break;
}
});

Tutaj działające dla dla dwójch modeli https://jsfiddle.net/yys64udc/2/