I have created a dropdown that populates its values from an external JSON file. What I would like to do is be able to select a player from the drop down, and then in the text area below, have it display other information related to that player (hometown, etc), preferable in an html format.
Here is the code. Any help is greatly appreciated!
<html>
<head>
</head>
<body>
<select id="sel" onchange="show(this)">
<option value="">-- Select --</option>
</select>
<p id="msg"></p>
</body>
<script>
window.onload = populateSelect();
function populateSelect() {
// Create XMLHttpRequest object, with GET method.
var xhr = new XMLHttpRequest(),
method = 'GET',
overrideMimeType = 'application/json',
url = 'http://linechartbuilder.com/version1/Template-Roster.json'; // Add the file URL.
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// Parse JSON data.
var player = JSON.parse(xhr.responseText);
var ele = document.getElementById('sel');
for (var i = 0; i < player.length; i++) {
// Bind data to <select> element.
ele.innerHTML = ele.innerHTML +
'<option value="' + player[i].ID + '">' + player[i]['lastName'] + ', ' + player[i]['firstName'] +'</option>';
}
}
};
xhr.open(method, url, true);
xhr.send();
}
function show(ele) {
// Get the selected value from <select> element and show it.
var msg = document.getElementById('msg');
msg.innerHTML = + ele.options[ele.selectedIndex].value + '</b> </br>';
}
</script>
</html>