pseudo-title

Auswahlfilter

Auswahlfilter mit 2 Ebenen:

  • erste Ebene: Auswahl Autohersteller
  • zweite Ebene: Auswahl KFZ-Modell

Ergebnis:

  • wenn ein KFZ-Modell gewählt ist, ändert sich das Link-Ziel des Buttons "Produkte anzeigen" entsprechend der Auswahl.

 

id="company"

Hersteller

id="model"

Modell

id="all-models"

Alfa Romeo

Alpina

Audi

BMW

Citroen

Fiat

Ford

Hyundai

Mercedes

Opel

Peugeot

Renault

Rover

Seat

Skoda

Volkswagen


HTML

 

Hersteller 

 

 

<p class="hide">id="company"</p>

 

<form id="company" method="post">

    <h4>

        Hersteller

    </h4>

    <select name="company" size="8">

        <option value="" class="default" selected="selected">

            - bitte auswählen -

        </option>

        <option value="alfa">

            Alfa Romeo

        </option>

        <option value="alpina">

            Alpina

        </option>

        <option value="audi">

            Audi

        </option>

        <option value="bmw">

            BMW

        </option>

 

...

        <option value="vw">

            Volkswagen

        </option>

    </select>

</form>

 

 

 

Modell

 

<p class="hide">id="model"</p>

 

<form id="model" class="fpos" name="model" method="post">

    <h4>

        Modell

    </h4>

    <select id="model" name="model" size="8">

        <option value="" class="default" selected="selected">

            - bitte erst Hersteller auswählen -

        </option>

    </select>

</form>

 

Alle Modelle 


 
<p class="hide">id="all-models"</p>
 
<div id="all_models">
 
    <form id="alfa" class="fpos" name="alfa" method="post">
        <h4>
        Alfa Romeo
    </h4>
        <select name="model" size="8">
            <option value="" class="default" selected="selected">- bitte auswählen -</option>
 
            <option value="ar1"> Giulietta </option>
            <option value="ar2"> Mito </option>
            <option value="ar3"> Spider </option>
 
        </select>
    </form>
 
    <form id="alpina" class="fpos" name="alpina" method="post">
        <h4>
        Alpina
    </h4>
        <select name="model" size="8">
            <option value="" class="default" selected="selected">- bitte auswählen -</option>
 
            <option value="al1"> Alpina Roadster S </option>
            <option value="al2"> Alpina B3 </option>
            <option value="al3"> Alpina B5 </option>
            <option value="al4"> Alpina B10 </option>
 
        </select>
    </form>
    ...
 
    <form id="vw" class="fpos" name="vw" method="post">
        <h4>
        Volkswagen
    </h4>
        <select name="model" size="8">
            <option value="" class="default" selected="selected">- bitte auswählen -</option>
            
            <option value="vw1"> Volkswagen AMAROK </option>
            <option value="vw2"> Volkswagen BORA </option>
            <option value="vw3"> Volkswagen CADDY </option>
            <option value="vw4"> Volkswagen CC </option>
            <option value="vw5"> Volkswagen GOLF II </option>
            <option value="vw6"> Volkswagen GOLF III </option>
            <option value="vw7"> Volkswagen GOLF IV </option>
            <option value="vw8"> Volkswagen EOS </option>
            <option value="vw9"> Volkswagen GOLF V </option>
            <option value="vw10"> Volkswagen GOLF V PLUS </option>
            <option value="vw11"> Volkswagen GOLF VI </option>
            <option value="vw12"> Volkswagen JETTA </option>
            <option value="vw13"> Volkswagen LUPO </option>
            <option value="vw14"> Volkswagen PASSAT </option>
            <option value="vw15"> Volkswagen POLO </option>
            <option value="vw16"> Volkswagen SCIROCCO </option>
            <option value="vw17"> Volkswagen SHARAN </option>
            <option value="vw18"> Volkswagen T4 </option>
            <option value="vw19"> Volkswagen T5 </option>
            <option value="vw20"> Volkswagen TOURAN </option>
            <option value="vw21"> Volkswagen TIGUAN </option>
            <option value="vw22"> Volkswagen TOUAREG </option>
            <option value="vw23"> Volkswagen UP! </option>
 
        </select>
    </form>
 
</div>