0

我想根据第一个选择选项中选择的内容显示相关的选择选项。像我所做的那样在第一个选项上设置 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 做到这一点？

问候，比尔

-编辑-

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

我希望这能澄清一切。

4

1 回答 1

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/

于 2013-04-11T00:22:15.513 回答