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 個すべてではなく、次の 2 つの選択タグをそのコンテンツと共に貼り付けただけです)

次のクラスの次のセレクター: 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

設定は問題ありませんが、ID に頼って自殺する必要はありません。それらはまったく必要ありません-要素のインデックスを使用できます（カウントされない最初の要素があるため-1）。

$(".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 に答える