Question

我想显示相关的选项，具体取决于在第一个选项中选择的内容。像我做的那样在第一个选项上设置id是不错的做法，或者当你有大量的选择时，是否有一种聪明的方式做这样的事情？

所以我有一个带有可见选择的表单，带有一个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>

（现在我只用下面两个可能的选择标签粘贴了它的内容而不是全部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>

当有许多不同的选项时，如何使用jquery执行此操作？

此致比尔

-edit -

如果在<select name="distrikt" class="distrikt">中的选项中选择x，则选择相关的下一个选择。例如：如果选择id =“distrikt1”的选项，则应显示id =“distrikt-klubbar1”的选项。

我希望澄清一切。

Answer 1

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

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

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

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

1 个答案: