【问题标题】:Dynamic dependent dropdown select using ajax and jquery使用 ajax 和 jquery 的动态相关下拉选择
【发布时间】:2020-09-25 13:28:59
【问题描述】:

我正在尝试使用动态相关下拉选择进行搜索,第一个框从数据库中获取所有区域,第二个框获取我选择的区域的城市。 我的第一个框有问题,它没有显示区域的名称。

形式:

<form action="{{route('ghof')}}" method="get"> 
  {{ csrf_field() }}
  <select class="search-field location" name="region" id="region">
    <option selected></option>
    @foreach($vi as  $key => $value)
      <option value="{{$key}}">{{$value}}</option>
    @endforeach
  </select>
  <select type="text" class="search-field location" name="ville" id="ville"></select>
  <button class="search-btn" type="submit" id="search"> Recherche </button>
</form>

控制器:

public function  index() {
    $ville=Vil::orderBy('id','asc')->get()->pluck('region','id');

    return view ('index',[ 'vi'=>$ville,]);
}

public function delegation($id) {
    $delegation = region::where('ville_id',$id)->pluck('region','id');
    return json_encode($delegation);
}

脚本:

<script type="text/javascript">
    $(document).ready(function () {
        $('select[name="region"]').on('change', function() {
            var ville_id = $(this).val();
            if (ville_id) {
                $.ajax({
                    url: '/deleg/' + ville_id,
                    type: 'GET' ,
                    dataType: 'json',
                    success: function(data) {
                        $('select[name="ville"]').empty();
                        $.each(data,function(key, value){
                            $('select[name="ville"]').append('<option value="'+value+'">'+ value +'</option>');
                        });
                    }
                })
            } else {
                $('select[name="ville"]').empty();
            }
        });
    }); 
</script>

这是路线:

   Route::get('deleg/{id}','specvil@delegation');

【问题讨论】:

  • data 有要求的值吗?你可以在你的问题中添加 op 吗

标签: jquery ajax laravel


【解决方案1】:

代码中最有问题的部分很可能在控制器函数中:

public function delegation($id) {
    $delegation = region::where('ville_id',$id)->pluck('region','id');
    return json_encode($delegation);
}

在上面的代码中,看起来您选择的数据来自错误的模型,或者您选择了错误的数据,因为您想返回城市(ville ) 基于所选区域 ID。因此,从您与我们分享的内容中,您的这部分代码感到困惑或不完全清楚。但是,由于您尚未共享代码的所有重要部分,因此我只想在下面分享您的代码的工作版本。

几分钟之内,我在测试中或多或少地复制了您的代码。我创建了 2 个 Tablesregionscitys 以及两个 ModelsRegion城市。在这里我会详细介绍,不仅是为了你,也是为了以后寻找类似代码的开发者。

地区表

+-------------+------------------+------+-----+---------+----------------+
| Field       | Type             | Null | Key | Default | Extra          |
+-------------+------------------+------+-----+---------+----------------+
| id          | int(10) unsigned | NO   | PRI | NULL    | auto_increment |
| created_at  | timestamp        | YES  |     | NULL    |                |
| updated_at  | timestamp        | YES  |     | NULL    |                |
| region_name | varchar(191)     | NO   |     | NULL    |                |
+-------------+------------------+------+-----+---------+----------------+

citys 表(该表有一个来自区域表的外键作为 region_id):

+------------+---------------------+------+-----+---------+----------------+
| Field      | Type                | Null | Key | Default | Extra          |
+------------+---------------------+------+-----+---------+----------------+
| id         | bigint(20) unsigned | NO   | PRI | NULL    | auto_increment |
| created_at | timestamp           | YES  |     | NULL    |                |
| updated_at | timestamp           | YES  |     | NULL    |                |
| city_name  | varchar(191)        | NO   |     | NULL    |                |
| region_id  | bigint(20) unsigned | NO   | MUL | NULL    |                |
+------------+---------------------+------+-----+---------+----------------+

模型:App\Region模型在region.php

class Region extends Model{}

当然还有city.php文件中的App\City模型。

class City extends Model{}

我创建了 9 个城市 连接到 3 个地区 作为上表中的示例数据。

在我的 web.php 文件中,我将这几行 路由定义 与您的类似:

Route::get('/deleg/{id}', 'Drop1@getCities');
Route::get('/drop', 'Drop1@index');
Route::view('/ghof', 'ghof');

在上面的路由定义中,您可以看到我调用了我的控制器 Drop1,但我们如何命名并不重要。

所以,在我的Drop1.php 控制器文件中,我正确放置了您最重要的两个函数。第一种方法将在页面加载时提供 Region Model 中的 regions,第二种方法将提供 City 中的 cities模型在有人选择区域后触发ajax调用,获取所选区域的所有城市。

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Region; // model
use App\City;   // model

class Drop1 extends Controller
{

public function index()
    {
        $ville = Region::orderBy('id','asc')->get()->pluck('region_name','id');
        return view ('dropdowntest',[ 'vi' => $ville ]);
    }

public function getCities($region_id)
    {
        $delegation = City::where('region_id', $region_id)->pluck('city_name','id');
        return json_encode($delegation);
    }

  // a lot of other methods...
}

我修复了你的 delegation() 方法并将其重命名为 getCities() 实际上,所以没什么特别的。

最后你的视图/布局文件和你的几乎一样,我只是把它重命名为dropdowntest,我根本没有改变你的布局和脚本。

所以dropdowntest.blade.php

<h2>Here is a dropdown menu test</h2>
    <form action="{{ '/ghof' }}" method="get">
      {{ csrf_field() }}
    <div class="container mine">
      <select class="form-control form-control-lg search-field location" name="region" id="region">
        <option selected></option>
        @foreach($vi as  $key => $value)
          <option value="{{$key}}">{{$value}}</option>
        @endforeach
      </select>
      <select type="text" class="form-control form-control-lg search-field location" name="ville" id="ville"></select>
      <button class="search-btn" type="submit" id="search"> Recherche </button>
    </div>
    </form>
</body>

<script type="text/javascript">
    $(document).ready(function () {
        $('select[name="region"]').on('change', function() {
            var ville_id = $(this).val();
            if (ville_id) {
                $.ajax({
                    url: '/deleg/' + ville_id,
                    type: 'GET' ,
                    dataType: 'json',
                    success: function(data) {
                        $('select[name="ville"]').empty();
                        $.each(data,function(key, value){
                            $('select[name="ville"]').append('<option value="'+value+'">'+ value +'</option>');
                        });
                    }
                })
            } else {
                $('select[name="ville"]').empty();
            }
        });
    });

</script>

<style>
.location {
  width:30%;
  float: left;
}

</style>

我将结果放在这里,表明上述工作没有任何问题:

我希望我没有遗漏任何内容,而这正是您所寻找的。很可能你只需要检查并修复你的代码中的delegation() 方法,整个事情就可以像我一样工作。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2012-06-04
    • 2020-09-25
    • 1970-01-01
    • 2023-03-05
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多