Dynamic HTML Table 範例

這篇連結說明如何用JSON和JavaScript製作下拉選單:
http://www.w3schools.com/js/js_json_html.asp


擷取重點如下:

<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>

<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", "json_demo_db_post.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("x=" + dbParam);
}

</script>