Solució exercici3-ajax
De wikiserver
Fitxer html:
<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercici 4 AJAX</title>
</head>
<body>
<h1>Exercici 4 AJAX</h1>
<label>Escull una ciutat:</label>
<select name="ciutat" id="ciutat">
<option value="-">---------</option>
<option value="barcelona">Barcelona</option>
<option value="lacoruna">La Coruña</option>
<option value="madrid">Madrid</option>
<option value="sevilla">Sevilla</option>
</select>
<br><br>
<label>Escull un barri:</label>
<select name="barri" id="barri">
<option value="-">---------</option>
</select>
<script lang="javascript">
var ciutat = document.getElementById("ciutat");
var barri = document.getElementById("barri");
var xhr = new XMLHttpRequest();
ciutat.onchange = function () {
xhr.open("GET", "exercici4.php?q=" + ciutat.value);
xhr.send(null);
};
xhr.onreadystatechange = function () {
barri.innerHTML = "";
if (xhr.readyState == 4 && xhr.status == 200) {
var arr_barris = (xhr.responseText).split(",");
arr_barris.forEach((_barri) => {
var nouElement = document.createElement("option");
var nodeText = document.createTextNode(_barri);
nouElement.appendChild(nodeText);
barri.appendChild(nouElement);
})
}
};
</script>
</body>
</html>
