Diferència entre revisions de la pàgina «Solució exercici3-ajax»
De wikiserver
| Línia 52: | Línia 52: | ||
var nodeText = document.createTextNode(_barri); | var nodeText = document.createTextNode(_barri); | ||
nouElement.appendChild(nodeText); | nouElement.appendChild(nodeText); | ||
| − | barri.appendChild( | + | barri.appendChild(nouElement); |
}) | }) | ||
} | } | ||
Revisió de 17:32, 12 abr 2024
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>
