2

Quando o #sectionChooser vem do Ajax o não funciona o select #bairros para colocar a #rua, onde estaria o problema?

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>

estou tentando assim, mais ainda não deu

$(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>');

        }
    });

});
7
  • Esse #sectionChooser vem do Ajax?
    – Sam
    Commented 8/05/2018 às 17:34
  • sim vem do ajax, ainda nao deu certo Commented 8/05/2018 às 17:38
  • Passe seu html também para que possamos simular seu problema. Commented 8/05/2018 às 17:40
  • coloquei na resposta Commented 8/05/2018 às 17:49
  • Não vá alterando a pergunta conforme as respostas. Senão a gente perde como estava.
    – Sam
    Commented 8/05/2018 às 17:51

2 Respostas 2

0

O problema é que está selecionando o id errado: em vez de #bairro, o correto seria #bairro3, veja:

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

Ao usar Ajax, em vez de usar eventos .change, use .on:

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

e

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

Assim não terá problemas de delegação com elementos inseridos de forma dinâmica na página.

O código deve ficar assim:

$(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>');

        }
    });

});
11
  • ainda não deu certo amigo, estranho que não retorna nenhum erro no console Commented 8/05/2018 às 19:40
  • coloque um console.log("ok"); dentro dos eventos para ver se pelo menos está pegando o click.
    – Sam
    Commented 8/05/2018 às 20:01
  • aqui sim $(document).on('change', '#sectionChooser', function(){ mais aqui $(document).on('change', '#bairro', function(){ nao Commented 8/05/2018 às 20:04
  • olha a minha pergunta q editei com os console.log("ok"); Commented 8/05/2018 às 20:06
  • 1
    O problema é que o id é #bairro3 e não #bairro
    – Sam
    Commented 8/05/2018 às 22:49
-1

Para pegar a <option> selecionada:

$('#sectionChooser option:selected').val();
3
  • ainda não deu certo amigo Commented 8/05/2018 às 17:38
  • Então o erro não está ai, porque assim vc pega o option selecionado, pode dar um alert pra vc ver o value.
    – Wees Smith
    Commented 8/05/2018 às 17:41
  • oha como eu fiz na resposta, coloquei o html também Commented 8/05/2018 às 17:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .