我试图显示一个嵌套的选择选项,具体取决于他选择的选择选项。 对于第一个参数,它工作正常但嵌套在父级下面不会渲染。 这是jsFiddle for this work。
HTML
<div class="lms-sport">
<span>Sport</span>
<select name="sport" id="sport" class="sportform" >
<option value=""></option>
<option value="Football">Football</option>
<option value="Basketball">BasketBall</option>
</select>
<br />
<div class="football">
<li id="footF" class="">
<label for="info">
<span>Stronger Foot</span>
</label>
<select name="foot" class="sportform" >
<option value="Left">Left</option>
<option value="Right">Right</option>
</select>
</li>
<li id="formatF">
<label for="format">
<span>Preferred Format</span>
</label>
<select name="format" class="sportform" >
<option value="Standard (11s, FIFA Rules)">Standard (11s, FIFA Rules)</option>
<option value="Futsal (5s on court, FIFA Futsal Rules)">Futsal (5s on court, FIFA Futsal Rules)</option>
<option value="Street (3-6 players, Custom Rules)
">Street (3-6 players, Custom Rules)
</option>
<option value=" Field (7-9 players, FIFA Rules)"> Field (7-9 players, FIFA Rules)</option>
</select>
</li>
<li id="positionF" class="">
<label for="position">
<span>Preferred Position</span>
</label>
<select name="position" class="sportform" >
<option>Forward</option>
<option>Midfielder (MF)</option>
<option>Defender (DF)</option>
<option>.Goalkeeper (GK)</option>
</select>
<li id="positionfow">
<label for="forward">
<span>Forward</span>
</label>
<select name="forward">
<option value="Centre-Forward (CF)">Centre-Forward (CF)</option>
<option value="Second Striker (SS)">Second Striker (SS)</option>
<option value="Left-Winger (LW)">Left-Winger (LW)</option>
<option value="Right-Winger (RW)">Right-Winger (RW)</option>
</select>
</li>
<li id="positionmid">
<label for="midfield">
<span>Midfield</span>
</label>
<select name="midfield">
<option value="Centre-Midfield (CM)">Centre-Midfield (CM)</option>
<option value="Defensive-Midfield (DM)">Defensive-Midfield (DM)</option>
<option value="Attacking-Midfield (AM)">Attacking-Midfield (AM)</option>
<option value="Left-Midfield (AM)">Left-Midfield (AM)</option>
<option value="Right Midfield (RM)">Right Midfield (RM)</option>
</select>
</li>
<li id="positiondef">
<label for="defense">
<span>Defense</span>
</label>
<select name="defense">
<option value="Centre-Back (CB)">Centre-Back (CB)</option>
<option value="Sweeper (SW)">Sweeper (SW)</option>
<option value="Left-back (LB)">Left-back (LB)</option>
<option value="Right-Back (RB)">Right-Back (RB)</option>
<option value="Left-Wing-Back (LWB)">Left-Wing-Back (LWB)</option>
<option value="Right-Wing-Back (RWB)">Right-Wing-Back (RWB)</option>
</select>
</li>
</li>
</div>
<div class="basketball">
<li id="formatB">
<label for="format">
<span>Preferred Format</span>
</label>
<select name="format" class="sportform" >
<option value="Standard (5x5)">Standard (5x5)</option>
<option value="Half-Court (3x3)">Half-Court (3x3)</option>
<option value=" Street (2-5 players, Custom Rules)"> Street (2-5 players, Custom Rules)</option>
<option value=" Field (7-9 players, FIFA Rules)"> Field (7-9 players, FIFA Rules)</option>
</select>
</li>
<li id="positionB" class="">
<label for="position">
<span>Preferred Position</span>
</label>
<select name="position" class="sportform" >
<option>Guard (G)</option>
<option>Center (C)</option>
<option>Forward (F)</option>
</select>
<li id="positiong">
<label for="guard">
<span>Guard (G)</span>
</label>
<select name="guard">
<option value="Guard-Forward (GF)">Guard-Forward (GF)</option>
<option value="Point-guard (PG)">Point-guard (PG)</option>
<option value="Shooting-Guard (SG)">Shooting-Guard (SG)</option>
</select>
</li>
<li id="positionc">
<label for="center">
<span>Center (C)</span>
</label>
<select name="center">
<option value="Center-Forward (CF)">Center-Forward (CF)</option>
</select>
</li>
<li id="positionf">
<label for="forward">
<span>Forward (F)</span>
</label>
<select name="forward">
<option value="Forward-Center (FC)">Forward-Center (FC)</option>
<option value="Point-Forward (PF)">Point-Forward (PF)</option>
<option value="Small-Forward (SF)">Small-Forward (SF)</option>
</select>
</li>
</li>
</div>
JS
$("#sport").change(function() {
$("#footF, #formatF, #positionF")[$(this).val() == "Football" ? 'show' : 'hide']("fast");
}).change();
$("#sport").change(function() {
$("#formatB,#positionB")[$(this).val() == "Basketball" ? 'show' : 'hide']("fast");
}).change();
首选位置的任何解决方法,将显示当前存在的选项。