Question

我有3个从属选项选择，我正在尝试根据先前使用AJAX的选择进行填充，但我做不到。

我正在使用Laravel，这部分似乎还可以。

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>

我想问题出在select.find，因为我可以在console.log(op)看到正确的答案。

这是 op数据：

 <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>

但是我无法用生成的选项填充选择。谢谢。

Answer 1

存储在$(this).parent()变量中的select将引用div标记的父.country，这意味着当您尝试selec.find(".province")时选择器将找不到元素，因为div中没有province类的元素，我建议使用{}（应该是唯一的）作为选择的目标：

id

然后替换：

var select = $("#province");

通过：

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

附加选项选择Ajax

1 个答案: