jQuery: Drop-Down-Box ändern

1 Kommentare
Thierry Nischelwitzer, Webapplikations-Programmierer (bis 2012)

Man hat beispielsweise, wie in meinem Fall, zwei Drop-Down-Boxen: Eine beinhaltet Hersteller und die zweite Modelle. Jetzt will man natürlich nur die Modelle des ausgewählten Herstellers einblenden. Das geht ganz einfach mit jQuery.

Als Ausgangslage haben wir zum Beispiel etwa ein solches HTML-Konstrukt für die zwei Drop-Down-Boxen.

1<label for="intHersteller">Hersteller</label>
2<select id="intHersteller" name="intHersteller">
3<option value="0">Bitte ausw&auml;hlen</option>
4<option value="2">Audi</option>
5<option value="3">BMW</option>
6<option value="4">VM</option>
7</select>

Und für die Modelle folgenden Code:

1<p id="model_2" style="display: none;">
2<label for="intModel_2">Modell</label>
3<select id="intModel_2" name="intModel_2">
4<option value="0">Bitte ausw&auhl;hlen</option>
5<option value="2">A3</option>
6<option value="3">RS6</option>
7</select>
8</p>
9
10<p id="model_3" style="display: none;">
11<label for="intModel_3">Modell</label>
12<select id="intModel_3" name="intModel_3">
13<option value="0">Bitte ausw&auml;hlen</option>
14<option value="4">M3</option>
15<option value="5">X5</option>
16</select>
17</p>

Es braucht gar nicht viel um abzurufen, ob die erste Drop-Down-Box geändert worden ist. Und dann auch gleich den alten Wert ausblenden und den neuen Einblenden.

1<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
2<script type="text/javascript">
3    var lastModel = 0;
4    
5    $(document).ready(
6        function () {
7            $('#intHersteller').change(
8                function () {
9                    $('#model_' + $(this).val()).show();
10                    $('#model_' + lastModel).hide();
11                    
12                    lastModel = $(this).val();
13                }
14            );
15        }
16    );
17</script>