javascript - 选择类(class)的第一个 child 在 <select> 中不起作用

Question

这是我的 fiddle :

http://jsfiddle.net/augTa/

这是我的html:

    <legend>Team Type</legend>
    <label>* Select Type :</label>

    <select name="team_type" style="width:150px;" id="team_type">
        <option value="1">Baseball</option>
        <option value="2">Soccer</option>
    </select>
    <div style="clear: both"></div>

    <legend>League</legend>
    <label>* Select Type :</label>
    <select id="league_type" style="width:150px;" name="league_id">
        <option value="7" class="league_group league_group_2" style="display: none;">UEFA Europa League</option>
        <option value="2" class="league_group league_group_1" style="display: block;">UEFA Champions League</option>
        <option value="1" class="league_group league_group_3" style="display: none;">England Premier</option>
        <option value="42" class="league_group league_group_2" style="display: none;">Czech Gambrinus liga</option>
        <option value="6" class="league_group league_group_1" style="display: block;">Spain Primera Liga</option>
        <option value="53" class="league_group league_group_1" style="display: block;">Holland  Dutch Cup</option>
        <option value="8" class="league_group league_group_1" style="display: block;">Italy Serie A</option>
        <option value="10" class="league_group league_group_1" style="display: block;">Bundesliga</option>
        <option value="40" class="league_group league_group_1" style="display: block;">Turkey Super Lig</option>
        <option value="39" class="league_group league_group_1" style="display: block;">Finland D1</option>
        <option value="48" class="league_group league_group_1" style="display: block;">Argentina Primera</option>
        <option value="19" class="league_group league_group_1" style="display: block;">Italy Serie B</option>
        <option value="5" class="league_group league_group_1" style="display: block;">England Carling Cup</option>
        <option value="3" class="league_group league_group_1" style="display: block;">England Championship</option>
        <option value="47" class="league_group league_group_1" style="display: block;">England Blue Square South</option>
        <option value="18" class="league_group league_group_1" style="display: block;">Johnstone Paint Trophy</option>
        <option value="4" class="league_group league_group_1" style="display: block;">England League One</option>
        <option value="46" class="league_group league_group_1" style="display: block;">England Blue Square North</option>
        <option value="28" class="league_group league_group_1" style="display: block;">England League 2</option>
        <option value="45" class="league_group league_group_1" style="display: block;">Holland Jupiler League</option>
        <option value="27" class="league_group league_group_1" style="display: block;">England Blue Square premier</option>
        <option value="9" class="league_group league_group_1" style="display: block;">Scotland Premier</option>
        <option value="17" class="league_group league_group_1" style="display: block;">Dutch Eredivisie</option>
        <option value="15" class="league_group league_group_1" style="display: block;">France Ligue 1</option>
        <option value="38" class="league_group league_group_1" style="display: block;">FRANCE LIGUE 2</option>
        <option value="20" class="league_group league_group_1" style="display: block;">Russia Premier League</option>
        <option value="22" class="league_group league_group_1" style="display: block;">France National</option>
        <option value="11" class="league_group league_group_1" style="display: block;">Portugal Liga</option>
        <option value="34" class="league_group league_group_1" style="display: block;">Sweden Superettan</option>
        <option value="29" class="league_group league_group_1" style="display: block;">Norway Adeccoligaen</option>
        <option value="52" class="league_group league_group_1" style="display: block;">GERMANY CUP</option>
        <option value="54" class="league_group league_group_1" style="display: block;">France Coupe De La Ligue</option>
        <option value="26" class="league_group league_group_1" style="display: block;">Bundesliga 2</option>
        <option value="13" class="league_group league_group_1" style="display: block;">JAPAN LEAGUE 1</option>
        <option value="14" class="league_group league_group_1" style="display: block;">JAPAN LEAGUE 2</option>
        <option value="21" class="league_group league_group_1" style="display: block;">World Cup 2014</option>
        <option value="23" class="league_group league_group_1" style="display: block;">Brazil Brasileiro B</option>
        <option value="24" class="league_group league_group_1" style="display: block;">Brazil Brasileiro</option>
        <option value="25" class="league_group league_group_1" style="display: block;">Spain Segunda</option>
        <option value="30" class="league_group league_group_1" style="display: block;">Denmark D1</option>
        <option value="31" class="league_group league_group_1" style="display: block;">Africa Nations Cup</option>
        <option value="32" class="league_group league_group_1" style="display: block;">Ireland Premier</option>
        <option value="33" class="league_group league_group_1" style="display: block;">Denmark Superliga</option>
        <option value="36" class="league_group league_group_1" style="display: block;">Sweden Allsvenskan</option>
        <option value="37" class="league_group league_group_1" style="display: block;">Norway Tippeligaen</option>
        <option value="41" class="league_group league_group_1" style="display: block;">Romania Lig1</option>
        <option value="43" class="league_group league_group_1" style="display: block;">Turkey Super Lig1</option>
        <option value="44" class="league_group league_group_1" style="display: block;">South America Copa</option>
        <option value="49" class="league_group league_group_1" style="display: block;">Switzerland  Challenge League</option>
        <option value="50" class="league_group league_group_1" style="display: block;">ItalySerie C1/A</option>
        <option value="51" class="league_group league_group_1" style="display: block;">Norway Eliteserien</option>
        <option value="55" class="league_group league_group_1" style="display: block;">Poland Ekstraklasa</option>
</select>

这是我的js:

$("#team_type").bind("change",function() {
    $(".league_group").hide();
    $(".league_group_"+$(this).val()).show();
    $("#league_type").val($(".league_group_"+$(this).val()+":first-child").val());
});

这是我想要的:

我想要的是在每次用户选择不同的团队类型时通过 javascript 选择第一个可见选项。

因此，如果我在 team_type 上选择足球，它应该 league_type 应该自动选择 league_group_1 first-child，反之亦然。

Answer 1

将所有选项的selected属性设置为false，然后过滤并显示合适的，然后获取第一个并设置为选中。

$("#team_type").on("change", function () {
    $(".league_group").hide()
                      .prop('selected', false)
                      .filter('.league_group_'+this.value)
                      .show()
                      .first()
                      .prop('selected', true);
}).trigger('change');

FIDDLE

这仍然无法跨浏览器工作。