How do i show next select option based on previous choice using jquery?

Question

I want to show related select options depending on what gets chosen in the firs select option. Is it good practice to set id's on the first options like i have done, or is there a smart way of doing stuff like this when you have allot of option?

So i have a form with a visible select with a class of distrikt and each of the options is given an id.

<div class="not-hidden">
<select name="distrikt" class="distrikt span2">
    <option id="distrikt1">Alla Distrikt</option>
    <option id="distrikt2">Bohuslän-Dals</option>
    <option id="distrikt3">Dalabridgen</option>
    <option id="distrikt4">Gotlands</option>
    <option id="distrikt5">Gävleborgs</option>
    <option id="distrikt6">Hallands</option>
    <option id="distrikt7">Jämtland-Härjedalens</option>
    <option id="distrikt8">Jönköpings läns</option>
    <option id="distrikt9">Medelpads</option>
    <option id="distrikt10">Mälardalens</option>
    <option id="distrikt11">Norrbottens</option>
    <option id="distrikt12">Skånes</option>
    <option id="distrikt13">Stockholms</option>
    <option id="distrikt14">Sydöstra Sveriges</option>
    <option id="distrikt15">Uplands</option>
    <option id="distrikt16">Värmland-Dals</option>
    <option id="distrikt17">Västerbottens</option>
    <option id="distrikt18">Västergötlands</option>
    <option id="distrikt19">Ångermanlands</option>
    <option id="distrikt20">Örebro läns</option>
    <option id="distrikt21">Östra Mellansvenska</option>
</select>
</div>

(Now i have only pasted in the next two possible select tags with it's content instead of all 21)

These next selectors with the class of: distrikt-klubbar is hidden. Depending on which of the previous option that is selected, i would like the corresponding sector to appear.

<div class="hidden">
    <select name="distrikt1-klubbar" id="distrikt1-klubbar" class="distrikt-klubbar">
        <option>Billingsfors BS</option>
        <option>Brastads BS</option>
        <option>Färgelada BK</option>
        <option>Hunnebostrands BK</option>
        <option>Kungshamns BK</option>
        <option>Ljungskile BK</option>
        <option>Munkedals BS</option>
        <option>Orust BK</option>
        <option>Stenugnsunds BK</option>
        <option>Strömstads BK</option>
        <option>Tanums BK</option>
        <option>Tjörns BK</option>
        <option>Trollhättans BK</option>
        <option>Uddevalla BF</option>
        <option>Upphärads BK</option>
        <option>Vänern Teckenspråkig BS</option>
        <option>Vänersborgs BS</option>
    </select>
</div>
<div class="hidden">
    <select name="distrikt2-klubbar" id="distrikt2-klubbar" class="distrikt-klubbar">
        <option>Borlänge BK</option>
        <option>Dövas BK Dalom</option>
        <option>Falu BK</option>
        <option>Folkare BK</option>
        <option>Hedemora BS</option>
        <option>Insjöns BK</option>
        <option>LudvikaBygdens BK</option>
        <option>Malungs BK</option>
        <option>Mora BK</option>
        <option>Rättviks BS</option>
        <option>Särna BK</option>
        <option>Säters BK</option>
    </select>
</div>

How can i do this with jquery when there are allot of different options?

Regards, Bill

-edit-

If selected x among options in <select name="distrikt" class="distrikt"> then chose the related, next selection. For example: If one chose the option with id="distrikt1", then the select with id="distrikt-klubbar1" should be shown.

I hope that clarifies it all.

Answer 1

Your setup is okay, but you don't have to kill yourself by relying on IDs. You don't need them at all -- you can just use the index of the element (-1 because you have an initial element that doesn't count).

$(".distrikt").on('change', function () {
    $(".distrikt-klubbar").hide()
        .eq($(this).find(":selected").index() - 1).show();
});

http://jsfiddle.net/ExplosionPIlls/2xPxV/