I have the following JS.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script><scripttype="text/javascript">
$(document).ready(function(){
$("select[name=cidade]").change(function(){
$("select[name=bairro]").html('<option value="0">Carregando...</option>');
$.post("bairros.ajax.php",
{cidade:$(this).val()},
function(valor){
$("select[name=bairro]").html(valor);
}
)
})
})
</script>
And HTML
<form action="" method="post">
<select name="cidade">
<option value="0">Escolha uma Cidade</option>
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("jcentregas");
$sql = "SELECT * FROM cidade ORDER BY cidade ASC";
$qr = mysql_query($sql) or die(mysql_error());
while($ln = mysql_fetch_assoc($qr)){
echo '<option value="'.$ln['idCidade'].'">'.$ln['cidade'].'</option>';
}
?>
</select>
<select name="bairro">
<option value="0" disabled="disabled">Escolha uma cidade Primeiro</option>
</select>
</form>
bairros.ajax.php
mysql_connect("localhost", "root", "");
mysql_select_db("jcentregas");
$cidade = $_POST['cidade'];
$sql = "SELECT * FROM bairro WHERE idCidade = '$cidade' ORDER BY bairro ASC";
$qr = mysql_query($sql) or die(mysql_error());
if(mysql_num_rows($qr) == 0){
echo '<option value="0">'.$_POST['cidade']."->".htmlentities('Não bairros nesta cidade').'</option>';
}else{
while($ln = mysql_fetch_assoc($qr)){
echo '<option value="'.$ln['idBairro'].'">'.$ln['bairro'].'</option>';
}
}
Theoretically it works perfectly. However, I would like the field names to be in array because there are several cities and several neighborhoods that can be selected example:
In this image, I can add several fields with the same name and pass them in the array ... can you do this with the cities / neighborhoods in jquery and html above?