i am having a problem in which the code that i wrote are working as the way I wanted when there is 2 dependant drop down but when i want to add a third dependant dropdown i realize that my code had gone wrong on the select tag (the select tag are not closed), But it works??
I dont understand why my codes work when the select tag is not closed, but my codes dont work when the select tag is closed @ line 43
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function getState(val) {
$.ajax({
type: "POST",
url: "index.php",
data:'country_id='+val,
success: function(data){
$("#state-list").html(data);
}
});
}
</script>
</head>
<?php
$conn = new mysqli("localhost", "root", "", "dropdowndb");
if ($conn->connect_errno) {
echo $conn->connect_error;
}
$query = "SELECT * FROM country";
$result = mysqli_query($conn, $query);
?>
<select onChange="getState(this.value);">
<?php while ($row = $result->fetch_row()) { ?>
<option value="<?= $row[0] ?>"><?= $row[1] ?></option>
<?php } ?>
</select>
<select name="state" id="state-list">
<option value="">Select State</option>
<?php if(!empty($_POST["country_id"])): ?>
<?php
$query ="SELECT * FROM state WHERE country_id = '" . $_POST["country_id"] . "'";
$result = mysqli_query($conn, $query);
?>
<select>
<?php while ($row = $result->fetch_row()) { ?>
<option value="<?= $row[0] ?>"><?= $row[1] ?></option>
<?php } ?>
</select>
<?php endif ?>