Question

这是我的HTML代码。

  <div class="form-group row add">
                        <label class="control-label col-sm-2" for="division_id">Division Name:</label>
                        <div class="col-sm-10">
                            <select name="district_id" id ="district_id" class="selectdistrict">
                                <option value="">--Select district--</option>
                               @foreach($atmdistrict as $cat)
                                <option value="{{$cat->id}}">{{$cat->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                     <div class="form-group row add">
                        <label class="control-label col-sm-2" for="thana_id">Thana Name:</label>
                        <div class="col-sm-10">
                            <select name="thana_id" class="thananame" id ="thana_id" >
                               <option value="0" disabled="true" selected="true">Thana Name</option>
                            </select>
                        </div>
                    </div>

这是我依赖下拉列表的ajax查询。

  $(document).ready(function(){

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

            var district_id=$(this).val();
             console.log(district_id);
            var div=$(this).parent();

            var op=" ";

            $.ajax({
                type:'get',
                url:'{!!URL::to('findThanaName')!!}',
                data:{'id':district_id},
                success:function(data){
                    console.log('success');

                    console.log(data);

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

                   div.find('.thananame').html(" ");
                 //  console.log(  div.find('.name').html(" "));
                   div.find('.select').append(op);
                   //console.log(  div.find('.select').append(op));
                },
                error:function(){
                        console.log('error');
                }
            });
        });

    });

控制台日志显示没有错误，并且正在返回正确的数据。但是，下拉菜单未显示任何数据。我无法弄清楚自己哪里出错了。

screenshot of the program running

Answer 1

尝试改变：

div.find('.select').append(op);

by：

$("#thana_id").html(op);

Ajax查询在控制台日志中返回正确的值，但未在视图中显示

1 个答案: