TS3_改良

by sunnyhong

HTML

<div>

<h4>Select a gameseries:</h4>
<select id="test">
  <option value="Super Mario">Super Mario</option>
  <option value="Yoshi\'s Woolly World">Yoshi\'s Woolly World</option>
  <option value="The Legend of Zelda">The Legend of Zelda</option>
  <option value="Breath of the Wild">Breath of the Wild</option>
  <option value="Animal Crossing">Animal Crossing</option>
  <option value="Star Fox">Star Fox</option>
  <option value="Metroid">Metroid</option>
  <option value="F-Zero">F-Zero</option>
  <option value="Pikmin">Pikmin</option>
  <option value="Punch Out">Punch Out</option>
  <option value="Wii Fit">Wii Fit</option>
  <option value="Kid Icarus">Kid Icarus</option>
  <option value="Classic Nintendo">Classic Nintendo</option>
  <option value="Mii">Mii</option>
  <option value="Splatoon">Splatoon</option>
  <option value="Mario Sports Superstars">Mario Sports Superstars</option>
  <option value="Pokemon">Pokemon</option>
  <option value="Kirby">Kirby</option>
  <option value="BoxBoy!">BoxBoy!</option>
  <option value="Fire Emblem">Fire Emblem</option>
  <option value="Xenoblade">Xenoblade</option>
  <option value="Earthbound">Earthbound</option>
  <option value="Chibi Robo">Chibi Robo</option>
  <option value="Sonic">Sonic</option>
  <option value="Bayonetta">Bayonetta</option>
  <option value="Pac-man">Pac-man</option>
  <option value="Megaman">Megaman</option>
  <option value="Street fighter">Street fighter</option>
  <option value="Monster Hunter">Monster Hunter</option>
  <option value="Shovel Knight">Shovel Knight</option>
  <option value="Final Fantasy">Final Fantasy</option>
  <option value="Kellogs">Kellogs</option>
</select>

</div>

<div id="content">
</div>

JavaScript

function readyFunc() {
$("#test").change(function(){  
  $('#content').html(`<h2>${$('#test').val()}</h2>`);
  $.ajax({
      url: 'http://www.amiiboapi.com/api/amiibo/',
      type: 'GET',
      data:  { gameSeries : $('#test').val() },
      dataType: "jsonp",
      //error:function(){alert('wrong');}
    }).done((result) => 
    {
			result.map((el) => 
      {
      	$('#content').append(`
        	<ul>
        		<h2>${el.name}</h2>
            gameSeries : ${el.gameSeries}<br>
            ${el.image}
        	</ul>
        `);
      });
    });
});
}

$(document).ready(readyFunc);