Navigieren / suchen

Mit jQuery Drop-Down-Box ändern

Im Betrieb stand ich letztens vor dem „Problem“ um die richtige Drop-Down-Box einzublenden. Konkret geht es um Hersteller und Modelle. Beispielsweise habe ich bei der Hersteller Drop-Down-Box nur Automarken drin und zu jeder Automarke habe ich eine Drop-Down-Box mit Modellen. Jetzt soll nur die Modell-Drop-Down-Box des ausgewählten Herstellers angezeigt werden. Da hilft jQuery enorm bzw. ist es mit jQuery super einfach.

Folgende Ausgangslage haben wir:

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

<p id="model_2" style="display: none;">
  <label for="intModel_2">Modell</label>
  <select id="intModel_2" name="intModel_2">
    <option value="0">Bitte ausw&auhl;hlen</option>
    <option value="2">A3</option>
    <option value="3">RS6</option>
  </select>
</p>

<p id="model_3" style="display: none;">
  <label for="intModel_3">Modell</label>
  <select id="intModel_3" name="intModel_3">
    <option value="0">Bitte ausw&auml;hlen</option>
    <option value="4">M3</option>
    <option value="5">X5</option>
  </select>
</p>

Mit diesem kleinen Stück Sourcecode kann man das ganz einfach realisieren:

$(document).ready(
  function () {
    $('#intHersteller').data('lastModel',0).change(
      function () {
        $('#model_' + $(this).val()).show();
        $('#model_' + $(this).data('lastModel')).hide();
        $(this).data('lastModel', $(this).val());      
      }
   );
   }
);

Das ist nun schon die von Mischa korrigierte Version. Auf dem Blog von backslash ist der Beitrag auf dem ich aufbaue.

Hinterlasse einen Kommentar

Name*

E-Mail* (wird nicht veröffentlicht)

Webseite