jQuery-Objekt-Lookup schlägt nur bei einem untergeordneten Objekt fehl

Question

Ich habe ein Datenobjekt, das ich verwende, um Dropdown-Listen mit jQuery dynamisch zu aktualisieren. Der Code funktioniert perfekt für ein Kind des Objekts, aber für den anderen funktioniert es überhaupt nicht.

Mein HTML:

<form name='apwd_player_reg' class='apwd_ctm_reg_form'> 
    <div id='existing_player_selector' class='apwd_form_fragment'> 
    <label for='existing_player_type'>Player Type</label> 
    <fieldset> 
     <input type="radio" name="existing_player_type" value="jun" />Junior 
     <input type="radio" name="existing_player_type" value="sen" />Senior 
    </fieldset> 
    <label for='existing_team'>Existing Team</label> 
    <select name='existing_team' id='existing_team'> 
     <option value='0'>Find your current team...</option> 
    </select> 
    <label for='player_name'>Player</label> 
    <select name='player_name' id='player_name'> 
     <option value='0'>Select player...</option> 
    </select> 
    </div> 

</form> 

Mein JS, einschließlich des Objekts:

var teamData = { 
    "sen": { 
    "Thunder": { 
     "237": "Aaron Peachey", 
     "357": "Dave Smith", 
     "687": "Gareth Stevens" 
    }, 
    "Feeders": { 
     "231": "Craig Bell", 
     "563": "Homer Simpson", 
     "134": "Javal McGee" 
    } 
    }, 
    "jun": { 
    "U12 Magic": { 
     "5": "Ayden Jones", 
     "17": "Jake Peterson", 
     "13": "Nick Mee" 
    }, 
    "U10 Thunder": { 
     "5": "Katie Simpson", 
     "17": "Billy Jones", 
     "13": "Tim Smith" 
    } 
    } 
}; 

var team_select = jQuery("#existing_team"); 
var player_select = jQuery("#player_name"); 
var player_type = jQuery("input[type=radio][name=existing_player_type]"); 
var reg_type = jQuery("input[type=radio][name=reg_type]"); 
var teams = null; 
var players = null; 

//populate team names from junior vs senior selection 
player_type.on('change', function() { 
    team_select.empty(); 
    team_select.append(jQuery("<option value='0'>Your current team...</option>")); 

    teams = teamData[jQuery(this).val()]; 

    jQuery.each(teams, function(key) { 
    team_select.append(jQuery("<option></option>") 
     .attr("value", key).text(key)); 
    }); 
}); 

//populate team names from junior vs senior selection 
team_select.on('change', function() { 
    player_select.empty(); 
    player_select.append(jQuery("<option value='0'>Player name...</option>")); 
    var player = player_type.val(); 
    var team = jQuery(this).val(); 

    players = teamData[player][team]; 

    jQuery.each(players, function(key, value) { 
    player_select.append(jQuery("<option></option>") 
     .attr("value", key).text(value)); 
    }); 
}); 

Sie können hier in meinem jsfiddle sehen:

https://jsfiddle.net/aaronp/21vuLru3/

Wenn Sie wählen Junior-Radio Schaltfläche, füllt es die Teamliste. Von hier aus, wenn Sie ein Team auswählen, füllt es die Spielerliste korrekt auf. Dies funktioniert für beide Junior Teams. Wenn Sie das Optionsfeld für den Senior auswählen, wird die Teamliste ebenfalls korrekt ausgefüllt. Aber von hier aus, wenn Sie ein Team auswählen, füllt es nichts als die Standardoption in die Spielerliste. Wenn ich console.log (player) nach dem Code suche, um es im Objekt nachzuschlagen, gibt es undefined zurück. Ich verstehe nicht, wie es gelingt, keine Spieler für die A-Nationalmannschaft zu finden, aber sie finden es gut für die Junior-Teams.

Ich habe versucht, die Reihenfolge der Elemente im Objekt zu ändern, die Bezeichnungen und Teamnamen usw. zu ändern, aber dieses bestimmte Objekt kann immer keine Ergebnisse abrufen.

Irgendwelche Ideen?

Dank Aaron

Answer 1

Ihr Player Selektor funktioniert nicht in team_select.on('change', function() {...}

statt:

var player = player_type.val(); 

Verwendung:

var player = $('input[name= existing_player_type]:checked', '#existing_player_selector').val(); 

Es sollte funktionieren. (Sie können es dann Refactoring, wie Sie bitte)

hier ein Arbeits JsFiddle ist: https://jsfiddle.net/21vuLru3/3/

Mit freundlichen Grüßen, Eric