Populating Cities/Neighborhoods in jQuery with fields in Array

Asked

Viewed 548 times

0

I have the following JS.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="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 the 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>

neighborhoods.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 name of the fields 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... you can do this with the cities/neighborhoods in jquery and html above?

  • If I understand correctly what you need is the $_POST in array format. For this you will have to leave the name of the dynamic fields. Example : <select name="tr[0][cidade]"></select>. where the 0 would be a contador of tr's.

  • Exactly Guilherme, But if I change the name of the field by a name in array[] jquery will not fetch the neighborhoods.... and that is precisely my doubt. :(

  • made quickly, you will need to adapt. http://jsfiddle.net/8zaadera/

  • I used jQuery 1.7.2, because that’s what I use at work, if you want to use 1.11 you have to adapt to .on('change', function(){ /* code */})

  • I understand... but there he seeks the results of the previous select... can you change? I do not understand much of js.

  • ah ok, I assumed you would already know what to do, but yes you can utilize this function within your post, so http://jsfiddle.net/8zaadera/2/

  • Currently I pass the parameters this way: <select class="input-small" name="cham_bairro[]" id="cham_bairro[]" style="width: 150px;">

  • I believe that this way is not incorrect, only makes the reading a little more complex.

Show 4 more comments
No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.