セレクトボックスの連動

Question

jQueryを使ってSelectBoxの連動させたいのですが思い通りに行かず困っています。
上部の球団項目のSelectBoxが選択されることにより下部の選手項目のSelectBoxが非表示から表示に切り替わり
選択できるようにしたいのですがどうすればいいのか分かりません。

お助けて頂けないでしょうか、どうか宜しくお願い致します。

<div id="team" class="form_fields">
 <label for="team">球団</label>
 <select id="team" name="team" class="form-control">
	<option value="0" selected="">球団を選択</option>
	<option value="1">読売ジャイアンツ</option>
	<option value="2">阪神タイガース</option>
	<option value="3">中日ドラゴンズ</option>
	<option value="4">横浜ベイスターズ</option>
	<option value="5">広島東洋カープ</option>
	<option value="6">東京ヤクルトスワローズ</option>
 </select>
</div>

<div id="player" class="form_fields">
 <label for="player">選手</label>
 <select id="player" name="player" class="form-control">
	<option value="0" team_id="0" selected="">選手を選択</option>
	<option value="1" team_id="6">山田 哲人</option>
	<option value="2" team_id="6">エスコバー</option>
	<option value="3" team_id="6">塩見 泰隆</option>
	<option value="4" team_id="6">村上 宗隆</option>
	<option value="5" team_id="6">青木 宣親</option>
	<option value="6" team_id="6">中山 翔太</option>
	<option value="7" team_id="6">西浦 直亨</option>
	<option value="8" team_id="6">川端 慎吾</option>
	<option value="9" team_id="6">西田 明央</option>
</select>
</div>


<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(){
    // 初期値が設定されている場合は最上位を選択させない
    var firstChange = ($("#team").val() == "");

    $("#team").on("change",function(){
        if(firstChange){
            // 最上位を選択（現在選択項目を解除）
            $("#player option[value='']").prop('selected',true);
        }
        firstChange = true;

        $("#player").hide();
        $("#player option[player_id='']").show();
        $("#player option[player_id=" + this.value + "]").show();
    }).change();
});
</script>

Comments

[m.ts10806]

現状のコードにおける問題点はなにでしょうか。
「何も手がつかない」ようには見えません

[Cat-plus]

下部のSelectBoxの<select></select>部分がhideになるのですが希望は<div></div>を非表示(none)にしたいのでどうすればいいのか分かりません。

[m.ts10806]

質問本文に追記してください

[m.ts10806]

idついてるし直に$()でセレクタ指定してしまえば良いのでは？

Answer 1

id="player"が競合しています

Comments

[yambejp]

optionのshow/hide/toggleはおすすめできません
データを別途配列か何かにもって都度入れ替えをするとよいでしょう

[yambejp]

optionにteam_idという勝手な属性をつけるのもあまりよくないです
やるならカスタムデータ方式にしてください

https://codepen.io/yambejp/pen/YzWRYyw

Answer 2

yambejp さんが指摘している通り、id の team, player の競合があるので、そこをまず修正すべきです。
あと option の抽出がplayer_idとなっていたり、初期値を空文字と想定していますが実際には"0"であったりと、修正点が他にもあります。
やりたいことは以下のようなコードになるかと思いますが、いかがでしょうか。

$(function(){
  $("#team").on("change",function(){
    var teamId = $(this).val();
    if(teamId == "0"){
      $("#player option[value='0']").prop('selected',true);
      $("#player").hide();
    } else {
      $("#player option[team_id!='0']").hide();
      $("#player option[team_id=" + teamId + "]").show()
      $("#player option:first").prop('selected',true);
      $("#player").show();
    }
  });
  $("#team").trigger("change");
})