jQuery中的嵌套选择选项

Question

我试图显示一个嵌套的选择选项，具体取决于他选择的选择选项。 对于第一个参数，它工作正常但嵌套在父级下面不会渲染。 这是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();

首选位置的任何解决方法，将显示当前存在的选项。