Alpaus Alpaus - 1 year ago 60
jQuery Question

jQuery object lookup fails on one child only

I have a data object which I'm using to dynamically update select dropdowns with jQuery. The code works perfectly fine for one child of the object but for the other it doesn't work at all.


<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>
<input type="radio" name="existing_player_type" value="jun" />Junior
<input type="radio" name="existing_player_type" value="sen" />Senior
<label for='existing_team'>Existing Team</label>
<select name='existing_team' id='existing_team'>
<option value='0'>Find your current team...</option>
<label for='player_name'>Player</label>
<select name='player_name' id='player_name'>
<option value='0'>Select player...</option>


My JS, including the object:

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.append(jQuery("<option value='0'>Your current team...</option>"));

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

jQuery.each(teams, function(key) {
.attr("value", key).text(key));

//populate team names from junior vs senior selection
team_select.on('change', function() {
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) {
.attr("value", key).text(value));

You can see in my jsfiddle here:

If you select junior radio button, it populates the team list. From here, if you choose a team, it populate's the player list correctly. This works for both junior teams.
If you select the senior radio button, it populates the team list correctly as well. But from here, if you choose a team it doesn't populate anything but the default option into the player list. When I console.log(players) after the code to look it up in the object is returns undefined. I don't understand how it's failing to find any players for the senior teams but is finding them fine for the junior teams.

I've tried changing the order of items in the object, changing the labels and team names etc. but this particular object always fails to retrieve any results.

Any ideas?


Answer Source

Your player selector doesn't work in team_select.on('change', function() {...}

instead of :

 var player = player_type.val();

use :

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

It should work. (You can then refactor it as you please)

Here is a working JsFiddle :

Best regards, Eric