tanatana/test.html

## test.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>$.each()のやつ</title>

  </head>
  <body>
    <h1>部員リスト</h1>
    <!-- この学校部活のid3桁で管理してるっぽいけど999個以上の部活動できたらどうするのかなとか考えちゃうよね -->
    <select id="clubSelector">
      <option>select</option>
      <option value="cl001">サッカー部</option>
      <option value="cl002">野球部</option>
      <option value="cl003">吹奏楽部</option>
    </select>

    <ul id="memberlist"></ul>

    新しいウィンドウの名前: <input id='newWindowName' type="text"> <br>
    <a href="#" id="openWindow">開く</a>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script>
     $(document).ready(function(){
       var clubMembers = {
         'cl001': ['st13010', 'st13011', 'st14012'],
         'cl002': ['st13100', 'st14100', 'st14005'],
         'cl003': ['st12023', 'st13045', 'st14009']
       };
       var students = {
         'st13010': {'name': 'A', 'grade': 2, 'class': 'A', 'sex': 'F'},
         'st13011': {'name': 'B', 'grade': 2, 'class': 'A', 'sex': 'M'},
         // 'st14012': {'name': 'C', 'grade': 1, 'class': 'A', 'sex': 'M'},
         'st13100': {'name': 'D', 'grade': 2, 'class': 'A', 'sex': 'M'},
         'st14100': {'name': 'E', 'grade': 1, 'class': 'A', 'sex': 'F'},
         'st14005': {'name': 'F', 'grade': 1, 'class': 'A', 'sex': 'M'},
         'st12023': {'name': 'G', 'grade': 3, 'class': 'A', 'sex': 'F'},
         'st13045': {'name': 'H', 'grade': 2, 'class': 'A', 'sex': 'M'},
         'st14009': {'name': 'I', 'grade': 1, 'class': 'A', 'sex': 'F'}
       };

       var clubMembersDetail = function(clubName){
         var detail = [];
         $.each(clubMembers[clubName], function(){
           detail.push(students[this]);
         });
         return detail;
       };


       $('#clubSelector').on('change', function () {
         var clubName = this.value
         $('ul#memberlist').empty();
         $.each(clubMembersDetail(clubName), function(){
           $('ul#memberlist').append('<li>' +  this.name + '</li>')
         });
       });

       $('#openWindow').on('click', function(){
         window.open('./', $('#newWindowName').val());
       });
     });


    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>$.each()のやつ</title>

	</head>
	<body>
	<h1>部員リスト</h1>
	<!-- この学校部活のid3桁で管理してるっぽいけど999個以上の部活動できたらどうするのかなとか考えちゃうよね -->
	<select id="clubSelector">
	<option>select</option>
	<option value="cl001">サッカー部</option>
	<option value="cl002">野球部</option>
	<option value="cl003">吹奏楽部</option>
	</select>

	<ul id="memberlist"></ul>

	新しいウィンドウの名前: <input id='newWindowName' type="text"> <br>
	<a href="#" id="openWindow">開く</a>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script>
	$(document).ready(function(){
	var clubMembers = {
	'cl001': ['st13010', 'st13011', 'st14012'],
	'cl002': ['st13100', 'st14100', 'st14005'],
	'cl003': ['st12023', 'st13045', 'st14009']
	};
	var students = {
	'st13010': {'name': 'A', 'grade': 2, 'class': 'A', 'sex': 'F'},
	'st13011': {'name': 'B', 'grade': 2, 'class': 'A', 'sex': 'M'},
	// 'st14012': {'name': 'C', 'grade': 1, 'class': 'A', 'sex': 'M'},
	'st13100': {'name': 'D', 'grade': 2, 'class': 'A', 'sex': 'M'},
	'st14100': {'name': 'E', 'grade': 1, 'class': 'A', 'sex': 'F'},
	'st14005': {'name': 'F', 'grade': 1, 'class': 'A', 'sex': 'M'},
	'st12023': {'name': 'G', 'grade': 3, 'class': 'A', 'sex': 'F'},
	'st13045': {'name': 'H', 'grade': 2, 'class': 'A', 'sex': 'M'},
	'st14009': {'name': 'I', 'grade': 1, 'class': 'A', 'sex': 'F'}
	};

	var clubMembersDetail = function(clubName){
	var detail = [];
	$.each(clubMembers[clubName], function(){
	detail.push(students[this]);
	});
	return detail;
	};


	$('#clubSelector').on('change', function () {
	var clubName = this.value
	$('ul#memberlist').empty();
	$.each(clubMembersDetail(clubName), function(){
	$('ul#memberlist').append('<li>' + this.name + '</li>')
	});
	});

	$('#openWindow').on('click', function(){
	window.open('./', $('#newWindowName').val());
	});
	});




	</script>
	</body>
	</html>