다른 선택 목록에서 JS 디스플레이가 선택된 옵션

나는 모두에게 조언을 구하기 위해 여기에 있습니다. 내가하려는 것은 팀을 선택하면 다른 플레이어의 플레이어 목록을 얻는 것입니다. 코드가 정상적으로 작동합니다. 이 코드를 다른 방식으로 사용 하시겠습니까? 어쩌면 ~ 12 명의 플레이어가있는 것처럼 코드를 조금 더 짧게 만들 수 있습니다. 코드는이 간단한 작업에 매우 길어집니다. 개선 할 부분이 있습니까? 감사합니다.다른 선택 목록에서 JS 디스플레이가 선택된 옵션

<body> 
<form> 
    <select id="teams" onchange="showPlayer();"> 
     <option>Team 1992</option> 
     <option>Team 2003</option> 
     <option>Team 2013</option> 
    </select> 
    <select> 
     <option id="player1">First</option> 
     <option id="player2">Second</option> 
    </select> 
</form>

var team2013 = ['Cowboy', 'Puppet']; 
    var team2003 = ['Mr. Star', 'Awesome']; 
    var team1992 = ['Mr. Amazing', 'Unstopable']; 

    function showPlayer(){ 
     var selection = document.getElementById('teams'); 
     var opt = selection.options[selection.selectedIndex]; 
     switch(selection.options.value){ 
      case 'Team 1992': 
       document.getElementById('player1').innerHTML = team1992[0]; 
       document.getElementById('player2').innerHTML = team1992[1]; 
       break; 
      case 'Team 2003': 
       document.getElementById('player1').innerHTML = team2003[0]; 
       document.getElementById('player2').innerHTML = team2003[1]; 
       break; 
      case 'Team 2013': 
       document.getElementById('player1').innerHTML = team2013[0]; 
       document.getElementById('player2').innerHTML = team2013[1]; 
       break; 
      default: alert('must choose') 
     } 
    }

출처

2013-09-21 MrPaulius

전혀 적합하지 않습니다. 여기에 더 나은 버전이 수백 개 있습니다. – mplungjan

확신합니다. 불행히도 하나 찾지 못했습니다. 그 이유는 무엇입니까? – MrPaulius

팀 크기에 따라 첫 번째 선택의 selectedIndex에 따라 다른 선택을 표시하고 다른 표시를 숨기는 것이 더 나을 수 있습니다. style.display = "none"vs "block" – mplungjan

확인이 post.

가장 일반적인 예는 선택한 국가에 따라 상태를 변경하는 것입니다.

출처

2013-09-21 18:25:57

이 예제는 jQuery와 함께, 나는 여전히 JS를 알아 내려고하고있다. :) 더 최적의 버전을 찾으려고했습니다. 다른 예제는 jQuery 또는 사람들이 선택시 항목 하나를 변경하는 방법을 보여주는 곳입니다. 그리고 나는 1 이상을 바꿀 필요가있다. – MrPaulius

다른 선택 목록에서 JS 디스플레이가 선택된 옵션

답변

관련 문제