JSFiddle - React, Tailwind, and code Playground
by BeePositive
HTML
<select id="sel" onchange="show(this)">
<option value="">-- Select --</option>
</select>
JavaScript
window.onload = populateSelect();
function populateSelect() {
// CREATE AN XMLHttpRequest OBJECT, WITH GET METHOD.
var xhr = new XMLHttpRequest(),
method = 'GET',
overrideMimeType = 'application/json',
url = 'http://random.medantechno.com/api/get_recent_posts/'; // ADD THE URL OF THE FILE.
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// PARSE JSON DATA.
var birds = JSON.parse(xhr.responseText);
var ele = document.getElementById('sel');
for (var i = 0; i < birds.length; i++) {
// BIND DATA TO <select> ELEMENT.
ele.innerHTML = ele.innerHTML +
'<option value="' + birds[i].id + '">' + birds[i].title + '</option>';
}
}
};
xhr.open(method, url, true);
xhr.send();
}