x
<html><body><h2>Make a table based on the value of a drop down menu.</h2><select id="myselect" onchange="change_myselect(this.value)"> <option value="">Choose an option:</option> <option value="customers">Customers</option> <option value="products">Products</option> <option value="suppliers">Suppliers</option></select><p id="demo"></p><script>function change_myselect(sel) { var obj, dbParam, xmlhttp, myObj, x, txt = ""; obj = { table: sel, limit: 20 }; dbParam = JSON.stringify(obj); xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myObj = JSON.parse(this.responseText); txt += "<table border='1'>" for (x in myObj) { txt += "<tr><td>" + myObj[x].name + "</td></tr>"; } txt += "</table>" document.getElementById("demo").innerHTML = txt; } }; xmlhttp.open("POST.html", "json_demo_db_post.json", true); xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xmlhttp.send("x=" + dbParam);}</script></body><!-- Mirrored from www.w3schools.com/js/tryit.asp?filename=tryjson_html_table_dynamic by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2020 02:28:18 GMT --></html>