jQueryオブジェクトの参照が1つの子のみで失敗する

Question

私はjQueryで選択ドロップダウンを動的に更新するために使用しているデータオブジェクトを持っています。コードは、オブジェクトの1つの子に対して完全に正常に動作しますが、他のオブジェクトでは全く動作しません。

マイ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> 

私のJS、：

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)); 
    }); 
}); 

あなたがここに私のjsfiddleで見ることができます：

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

あなたはジュニアラジオを選択した場合ボタンをクリックすると、チームリストが入力されます。ここから、チームを選ぶと、選手リストが正しく挿入されます。これは両方のジュニアチームに有効です。 シニアラジオボタンを選択すると、チームリストも正しく挿入されます。しかし、ここから、あなたがチームを選んだ場合は、デフォルトのオプション以外のものはプレイヤーリストに入力されません。オブジェクトの中でそれを探すためのコードの後のconsole.log（players）が未定義を返します。シニアチームにとってどのような選手が見つからないのか分かりませんが、ジュニアチームにとってはうまくいきます。

私はオブジェクト内のアイテムの順序を変更し、ラベルやチーム名などを変更しようとしましたが、この特定のオブジェクトは常に結果を取得できません。

アイデア？

var player = player_type.val(); 

使用：

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

それが動作するはず アーロン

Answer 1

はあなたのプレーヤーのセレクタはteam_select.on('change', function() {...}

の代わりに動作しません

感謝。ここで

が働いJsFiddleである（あなたが喜ばとしてあなたはそれをリファクタリングすることができます）： https://jsfiddle.net/21vuLru3/3/

敬具、 エリックを