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

问题描述：

我想显示相关的选择选项，具体取决于在第一选择选项中选择的内容。在我做过的第一个选项上设置ID的好习惯，还是有一个聪明的方式来做这样的事情时，你有选择权？如何显示下一个选择选项基于以前的选择使用jQuery？

所以我有一个可见的选择与一类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时，有不同的选项分配？

问候，比尔

CNC中

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

我希望澄清一切。

可能重复（http://stackoverflow.com/questions/6954556/show-a-second-dropdown-based-on- previous-dropdown-selection） – Barmar 2013-04-11 00:20:29

我不太明白你想要发生什么。您能否通过举例说明（例如“如果我选择A中的选项X，然后选择B中的选项Y”） – asifrc 2013-04-11 00:23:51

只是一个友好的提示：'

答

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

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

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

的[显示基于先前的下拉选择的第二下拉]

这几乎看起来是伎俩。但是，如果选择了distrikt然后改变主意，并且想要选择“Alla Distrikt”（所有地区），则默认情况下。我不会回到默认？ – 2013-04-11 00:54:17

@htmlNewbie哦，我没有想到这一点;我想你可以添加'（if（$（this）.find（“：selected”）。index（）=== 0）{$（“。distrikt-klubbar”）。hide（）} – 2013-04-11 01:01:41

Thanks allot mr ！:)欣赏它！ – 2013-04-11 01:22:28

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

相关推荐