Ajax does not work when it comes from a form select

Question

When the #sectionChooser comes from Ajax or does not work select #neighborhoods to put the #street, where would be the problem?

Html

 <div class="col-sm-6">
                            <label for="Planos">Planos</label>

              <select name="Planos" id="sectionChooser" class="form-control valid" aria-invalid="false">              

              <option value="">Selecione</option>                   
    <option value="1">Diamante</option><option value="2">Ouro</option><option value="3">Prata</option><option value="4">Light</option><option value="5">Free</option><option value="19">Link</option>                   
              </select>         

    <div class="panel" id="1" style="display: block;">    

    <div class="col-sm-12">
                                    <label><b>Diamante</b></label>
                                    </div>
                                    </div>
<div class="col-sm-6">
                        <label for="Bairro">Bairro</label>
                        <select class="form-control valid" name="bairro" id="bairro3" required="" aria-invalid="false">
    <option value="">Selecione</option>                 
<option value="1">teste bairro</option><option value="2">teste bairro 2 3</option><option value="3">ação bairros</option><option value="4">Centro</option>


    </select> 
                    </div>

<div class="col-sm-6">
                        <label for="Rua">Rua</label>



<select class="form-control" name="rua" id="rua" required="">





    </select> 




                    </div>

I’m trying like this, but it still didn’t work

$(document).ready(function(){

    $(document).on('change', '#sectionChooser', function(){
        var myID = $(this).val();
        $('.panel').each(function(){
            myID === $(this).attr('id') ? $(this).show() : $(this).hide();
            console.log("ok");
        });
    })


    $(document).on('change', '#bairro', function(){
        var bairroID = $(this).val();

        if(bairroID){
            $.ajax({
                type:'POST',
                url:'ajax_data2.php',
                data:'bairro_id='+bairroID,
                success:function(html){
                    $('#rua').html(html);
                    console.log("ok");
                }
            }); 
        }else{
            $('#rua').html('<option value="">Select categoria first</option>');

        }
    });

});

Answer 1

The problem is that it is selecting the id wrong: instead of #bairro, the correct would be #bairro3, see:

                                                  id correto
                                                       ↓
<select class="form-control valid" name="bairro" id="bairro3" required="" aria-invalid="false">

When using Ajax, instead of using events .change, use .on:

$(document).on('change', '#sectionChooser', function(){

and

$(document).on('change', '#bairro', function(){

Then you will have no delegation problems with elements dynamically inserted on the page.

The code should look like this:

$(document).ready(function(){

    $(document).on('change', '#sectionChooser', function(){
        var myID = $(this).val();
        $('.panel').each(function(){
            myID === $(this).attr('id') ? $(this).show() : $(this).hide();
        });
    })


    $(document).on('change', '#bairro3', function(){
        var bairroID = $(this).val();

        if(bairroID){
            $.ajax({
                type:'POST',
                url:'ajax_data2.php',
                data:'bairro_id='+bairroID,
                success:function(html){
                    $('#rua').html(html);
                }
            }); 
        }else{
            $('#rua').html('<option value="">Select categoria first</option>');

        }
    });

});

Answer 2

To catch the <option> selected:

$('#sectionChooser option:selected').val();