Javascript 如何使用jquery显示基于上一个选择的下一个选择选项？

我想根据在第一选择选项中选择的内容显示相关的选择选项。像我一样在第一个选项上设置id是一种好的做法，还是当你分配了选项时，有一种聪明的方法来做这样的事情

因此，我有一个表单，它带有一个可见的select和一个distrikt类，每个选项都有一个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>

阿拉分布
博胡斯林-达尔
达拉比根
哥特兰省
Gävleborgs
哈兰省
Jämtland-Härjedalens
Jönköpings läns
Medelpads
马尔代伦
北博滕省
斯科内斯
斯德哥爾摩
西德斯特拉斯维尔吉斯酒店
高地
Värmland Dals
Västerbottens
瓦斯特格特兰
奥恩格曼兰
Örebro läns
Östra Mellansvenska

（现在我只粘贴了下面两个可能的select标记，其中包含内容，而不是全部21个）

下面这些类为：distrikt klubbar的选择器被隐藏。 根据前面选择的选项，我希望显示相应的扇区

<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>

比林斯福斯学士
黄铜
Färgelada BK
Hunnebostrands BK
昆山银行
永斯基勒酒店
蒙克达尔酒店
奥鲁斯特BK
速记
Strömstads BK
塔努姆斯酒店
特约恩斯酒店
特罗尔哈坦斯酒店
乌德瓦拉高炉
乌普哈德斯酒店
Vänern Teckenspråkig BS
Vänersborgs BS
博尔兰热酒店
达隆德瓦斯酒店
法鲁BK
Folkare BK
海德莫拉酒店
英斯根斯酒店
卢德维卡比登斯酒店
马隆斯酒店
莫拉湾
Rättviks BS
Särna BK
Säters BK

当存在不同选项的分配时，如何使用jquery实现这一点

问候,， 账单

-编辑-

如果在

中的选项中选择了x，则选择相关的下一个选项。例如：如果选择id=“distrikt1”的选项，则应显示id=“distrikt-klubbar1”的选择

---

我希望这能澄清一切。

您的设置还可以，但您不必依靠ID自杀。您根本不需要它们——您可以使用元素的索引（-1，因为您有一个不计数的初始元素）

---

可能的重复我不太明白你想发生什么。你能举例说明一下吗（例如，“如果我在A中选择了选项X，那么在B中选择了选项Y”），这只是一个友好的提醒：

标记不是元素，而是元素的属性。这几乎可以做到这一点。然而，如果一个人选择了一个distrikt，然后改变主意，并希望选择“Alla distrikt”（所有地区），则默认为。我不会回到默认状态吗？@htmlNewbie哦，我没有想到这一点；我想你可以添加`（如果（$（this）.find（“：selected”）.index（）==0{$（“.distrikt klubbar”）.hide（）}谢谢分配先生！：）谢谢！

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