Question

这是我的小提琴：

这是我的 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第一个孩子，反之亦然。

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

这仍然不能跨浏览器工作。

Answer 2

您可以改为使用$(".league_group_"+$(this).val()).eq(0).prop('selected',true);来选择该选项：

$("#team_type").bind("change",function() {
  $(".league_group").hide();
  $(".league_group_"+$(this).val()).show();
  $(".league_group_"+$(this).val()).eq(0).prop('selected',true);
});

<强> Working Demo

Answer 3

我认为保持HTML较少是管理代码的更好方法。为你创造了一个小提琴。点击http://jsfiddle.net/shibualexis/y5jFQ/

让团队及其相对联盟类型为JSON。

//Your team and league type as JSON
var teamType = ["team1","team2","team3"];
var leagueType = {
                    "team1":["Team1league1","Team1league2","Team1league3"],
                    "team2":["Team2league1","Team2league2"],
                    "team3":["Team3league1","Team3league2","Team3league3","Team3league4"]                 
                 };

通过调用以下功能，根据球队选择填写联赛名单。

function fillLeagueList(){
    var teamSelected = document.getElementById("teamSelect").value;
    var leagueListBox = document.getElementById("leagueSelect");
    var team = teamType[teamSelected];
    var leagueList = leagueType[team];

    while(leagueListBox.length>0){
        leagueListBox.remove(0);
    }

    for(var i=0; i< leagueList.length; i++)
    {
        var option = document.createElement("option");
        var leagueName = leagueList[i]
        option.text = leagueName;
        option.setAttribute("value",leagueName);
        leagueListBox.add(option);
    }

}

在<select> </select>中选择不能正常工作的第一个孩子

3 个答案: