Tugas 7 PWEB-D tugas2.php

<html>
<head>
    <title>Tugas PWEB - AJAX</title>

<script>
    function loadProvinsi() {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
            const myObj = JSON.parse(this.responseText);
            let html = "<option>Pilih Provinsi</option>";
            let idx = 0;
            for (let x of Object.keys(myObj)) {
                html += "<option";
                html += ` value='${idx}'>`;
                html += x;
                html += "</option>";
                idx += 1;
            }
            document.getElementById("provinsi").innerHTML = html;
        }
        xhttp.open("GET", "tugas2.json", true);
        xhttp.send();
    }

    function loadKabKota(idx) {
        const xhttp = new XMLHttpRequest();
        xhttp.onload = function () {
            const myObj = JSON.parse(this.responseText);
            let html = "<option>Pilih Kabupaten/Kota</option>";
            for (let x of Object.values(myObj)[idx]) {
                html += "<option>";
                html += x;
                html += "</option>";
            }
            document.getElementById("kabkota").innerHTML = html;
        }
        xhttp.open("GET", "tugas2.json", true);
        xhttp.send();
    }
</script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
</head>
<body onload="loadProvinsi()">
    <center>
        <h1>Pilih Alamat</h1>
        <br/>
        <br/>
        <select id="provinsi" class="form-select mb-3" onchange="loadKabKota(document.getElementById('provinsi').value)"><option>Pilih Provinsi</option></select>
        <br/>
        <select id="kabkota" class="form-select"><option>Pilih Kabupaten/Kota</option></select>
        <br/>
        <br/>
        <br/>
        <br/>
        <a href="index.php" class="btn btn-primary">Menuju Tugas ke 1</a>
    </center>
</body>
</html>