附加选项选择Ajax

Question

I have 3 dependent option selects and I'm trying to populate depending on previous selection with AJAX but I can't.

I'm using Laravel and this part seems to be ok.

HTML :

<div class="form-group col-md-3">
    {!! Form::label('country', 'Seleccione el País') !!}</br>

    <select name="country" id="country" class="form-control country" >
        <option value=""  disabled selected>Paises</option>
        @foreach($countries as $country)
           <option value="{{$country->id}}">{{$country->name}}</option>
        @endforeach  
   </select>
</div>


<div class="form-group col-md-3">
    {!! Form::label('prov', 'Seleccione la Provincia') !!}</br>

    <select name="province" id="province" class="form-control province">    
        <option value=""  disabled>Provincias</option>
    </select> 
</div>


<div class="form-group col-md-3">
    {!! Form::label('county', 'Seleccione el Partido') !!}</br>
    <select class="form-control" name="county" id="county">
        <option value=""  disabled >Partido</option>
    </select>
</div>

<div class="form-group col-md-3">
    {!! Form::label('locality', 'Seleccione la Localidad') !!}</br>
    <select class="form-control" name="locality" id="locality">
        <option value=""  disabled >Localidad</option>
    </select>
</div>

JS :

<script type="text/javascript">

$(document).ready(function(){

$(document).on('change','.country',function(){
     //console.log("hmm its change");

    var country_id=$(this).val();
    // console.log(country_id);
    var select=$(this).parent();
     console.log(select);
    var op=" ";

    $.ajax({
        type:'get',
        url:'{{ URL::route('findProvince') }}',
        data:{'id':country_id},
        success:function(data){
            //console.log(url);

            //console.log(data);

            //console.log(data.length);
            op+='<option value="0" selected disabled>Selecciona La Provincia</option>';
            for(var i=0;i<data.length;i++){
            op+='<option value="'+data[i].id+'">'+data[i].name+'</option>';
            //console.log(op);
           }

           select.find('.province').html(" ");
           select.find('.province').append(op);
           //console.log(op);

        },
        error:function(){

        }
    });
});
});

</script>

I guess that the problem is in select.find, because I can see the correct response in console.log(op).

This is the op data:

 <option value="0" selected disabled>Selecciona La Provincia</option>
 <option value="1">Buenos Aires</option>
 <option value="2">Catamarca</option> 
 <option value="3">Chaco</option>
 <option value="4">Chubut</option>
 <option value="5">Córdoba</option>
 <option value="6">Corrientes</option>
 <option value="7">Entre Ríos</option>
 <option value="8">Formosa</option>
 <option value="9">Jujuy</option>
 <option value="10">La Pampa</option>
 <option value="11">La Rioja</option>
 <option value="12">Mendoza</option>
 <option value="13">Misiones</option>
 <option value="14">Neuquén</option>
 <option value="15">Río Negro</option>
 <option value="16">Salta</option>
 <option value="17">San Juan</option>
 <option value="18">San Luis</option>
 <option value="19">Santa Cruz</option>
 <option value="20">Santa Fe</option>
 <option value="21">Santiago del Estero</option>
 <option value="22">Tierra del Fuego</option>
 <option value="23">Tucumán</option>
 <option value="24">Ciudad Autónoma de Buenos Aires</option>

But I can't fill the select with generated options. Thanks.

Answer 1

The $(this).parent() stored in your select variable will refer to the parent div of .country tag what means when you try selec.find(".province") the selector will not find the element since there's no element with the province class inside the div, What I suggest is to target the select with the id (that should be unique) using :

var select = $("#province");

Then replace :

select.find('.province').html(" ");
select.find('.province').append(op);

By :

select.html(op);