jQuery select option

첫번째 select에서 선택된 index값을 가져와서 두번째 select에 그 인덱스에 맞는 값을 넣어줬다.

이건 참 ㅂㅣ효율적인 것 같은데........... 집에가서 내 컴으로 해봐야겠다. 따로 js파일 만들어서 거기서 가져오는게 훨씬 나을 것 같다. 아니면 어ㄷㅣ 케스파에 등록되어 있는거 없나. 이걸 다 입력해야해?(물론 다 입력할 수 있지만)

$(function() {

  var team = $("option:selected").val();

  var cjP = ["Shy", "Untara", "Haru", "Bubbling"];

  var roxP = ["Smeb", "Peanut", "Kuro", "Cry"];

  var afsP = ["ikssu", "lindarang", "lira", "seonghwan"];

  $("#lol_team").on("change", callPlayer);

  function callPlayer() {

    $("#lol_player").empty();

    var teamIndex = $("option:selected").index();

    if (teamIndex == 0) {

      for (i = 0; i < cjP.length; i++) {

        $("#lol_player").append("<option>" + cjP[i] + "</option>");

      }

    } else if (teamIndex == 1) {

      for (i = 0; i < roxP.length; i++) {

        $("#lol_player").append("<option>" + roxP[i] + "</option>");

      }

    }else if(teamIndex == 2){

    for (i = 0; i < afsP.length; i++) {

        $("#lol_player").append("<option>" + afsP[i] + "</option>");

      }

    }

  }

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<link rel="stylesheet" href="/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="firstD">

  <fieldset class="lolField">

    <label for="team">selete a lol Team</label>

    <select name="team" id="lol_team">

      <option>CJ Entus</option>

      <option>ROX Tigers</option>

      <option>Afreeca Freecs</option>

      <option>SKT T1</option>

    </select>

    <label for="player">selete a player</label>

    <select name="player" id="lol_player">

    </select>

  </fieldset>

</div>