当我选择第一个列表值时，ajax动态下拉列表不起作用

Question

当输出屏幕加载并且我选择国家/地区时，则不显示州/省字段的选项。

这里是控制器dynamic_dependent.blade.php

<!DOCTYPE html>
<html>
<head>
   <title>Simple LogIn System</title>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
   <style type="text/css">
       .box{
           width: 600px;
           margin: 0 auto;
           border: 1px solid #ccc;
       }
   </style>
</head>
<body>
   <br>
   <div class="container box">
       <h3>Ajax Dynamic DropDown</h3><br>
       <div class="form-gruop">
           <select name="country" id="country" class="form-control input-lg dynamic" data-dependent="state">
               <option value="">Select Country</option>
               @foreach($country_list as $country)
               <option value="{{ $country->country }}">{{ $country->country }}</option>
               @endforeach
           </select>
       </div>
       <br>

       <div class="form-gruop">
           <select name="state" id="state" class="form-control input-lg dynamic" data-dependent="city">
               <option value="">Select State</option>

           </select>
       </div>
       <br>

       <div class="form-gruop">
           <select name="city" id="city" class="form-control input-lg dynamic">
               <option value="">Select City</option>
           </select>
       </div>
       <br>
       {{ csrf_field() }}
   </div>
</body>
</html>
<script type="text/javascript">
   $(document).ready(function(){
       $('.dynamic').change(function(){
           if($(this).val() != ''){
               var select = $(this).attr("id");
               var value = $(this).val();
               var dependent = $(this).data(dependent);
               var _token = $('input[name="_token"]').val();
               $.ajax({
                   processing : 'true',
                   serverSide : 'true',
                   url:"{{ route('dynamicdependent.fetch') }}",
                   method: "post",
                   data : {select:select,value:value,_token:_token,dependent:dependent},
                   success:function(result){
                       $('#'+dependent).html(result);
                   }
               })
           }
       });
       $('#country').change(function(){
           $('#state').val('');
           $('#city').val('');
       });

       $('#state').change(function(){
           $('#city').val('');
       });
   });
</script>

这里是查看文件DynamicDependent.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use DB;
class DynamicDependent extends Controller
{
    function index(){
        $country_list = DB::table('country_state_city')
                        ->groupBy('country')
                        ->get('country');
        return view('dynamic_dependent')->with('country_list',$country_list);
    }

    function fetch(Request $request){
        $select = $request->get('select');
        $value = $request->get('value');
        $dependent = $request->get('dependent');
        $data = DB::table('country_state_city')
                ->where($select,$value)
                ->groupBy($dependent)
                ->get();
        $output = '<option value="">Select '.ucfirst($dependent).'</option>';
        foreach ($data as $row) {
            $output .= '<option value"'.$row->dependent.'">'.$row->dependent.'</option>';
        }
        echo $output;
    }

}

Web.php路由文件

Route::get('/dynamic_dependent','DynamicDependent@index');
Route::post('dynamic_dependent/fetch','DynamicDependent@fetch')->name('dynamicdependent.fetch');

当我运行此命令并选择国家/地区时，控制台显示

jquery.min.js：4 POSThttp://127.0.0.1:8000/dynamic_dependent/fetch500（内部服务器错误）

“浏览器视图”

Answer 1

0
投票

您可以记录您的

_ token

确保它存在。

当我选择第一个列表值时，ajax动态下拉列表不起作用

问题描述投票：0回答：1

1个回答

最新问题

当我选择第一个列表值时，ajax动态下拉列表不起作用

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1