如何根据其他“选择”框中的选定选项设置“选择”框的下拉值

Question

我有两个<select> 盒子。假设名称是selectdistrict 和selectvillage。

首先，我需要从选择框selectdistrict 中获取值，该值用于为selectvillage 生成选项值。

我是 Laravel 的新手。我必须做什么才能获得价值？

经过我的搜索，我发现可以使用jQuery完成，使用onChange事件将值从视图selectdistrict扔到控制器并取回填写selectvillage。但是，我不知道该怎么做。有人可以给我一个提示/或如何处理这个案例吗？

A.选择地区

<select class="form-control" id="selectdistrict" name="selectdistrict" >
<option value="">-- SELECT --</option>
@foreach($district as $kota)
@if($item->district == $kota->municipality_name)
<option selected="selected" value="{{ $kota->municipality_name }}">{{ $kota->municipality_name }}</option>
@else
<option value="{{ $kota->municipality_name }}">{{ $kota->municipality_name }} 
</option>
@endif
@endforeach
</select>

B.选择村庄

<select class="form-control" name="selectvillage" id="selectvillage">


</select>

期望值选项从控制器发送，设置为选择框selectvillage。

flow process

Answer 1

当一个地区发生变化时，您需要向服务器发出 Ajax 调用 以获取其村庄。作为回应，您可以显示村庄沿 div 下降（我显示了 div id 为“dynamic_villages_list”的村庄列表）。

我假设您有两个下拉列表以及一个 <div> 来显示从服务器返回的村庄列表。 （为村庄创建下拉菜单）

<select id="selectdistrict" name="selectdistrict" >
-- options---
</select>

<div id="dynamic_villages_list">
  <select name="selectvillage" id="selectvillage">
     <option>Select Village</option>  
  </select>
</div>

$(document).ready(function() {
  $('#selectdistrict').on('change', function() {
    var district = $('selectdistrict').val();
    var ajax_url = 'Path to ajax call on server';
    $.ajax({
      type:"POST",
      url: ajax_url,
      data: {
        district : district
      },
      success: function(villagesList) {
        // add villages drop down to any <div>
        $('#dynamic_villages_list').html(villagesList);
      }
    });//ajax
  });// Change
});// Ready

因此，每次更改地区时，您的调用都会从服务器获取整个村庄列表并显示在您的页面上。记得在页面上进行 ajax 调用之前添加 jquery。
希望对您有所帮助。

Answer 2

试试这些：

<select class="form-control" id="selectdistrict" name="selectdistrict" onchange="getVillage(this);">
     <option value="">-- SELECT --</option>
</select>

<select class="form-control" id="selectvillage" name="selectvillage">
     <option value="">--- SELECT ----</option>
</select>

在 JavaScript 中：

function getVillage(event) 
{
    var district=$(event).val(); // has the selected district
    $.ajax({
      method: "post",
      url: '', //your url to get the village under selected district
      data: 
      {
         _token,
         district: district,
      },
      success: function(data) 
      {
          html = "<option>Select Village</option>";
          for (var i = 0; i < data.length; i++) 
          {
              html += "<option value="">**your village name here**</option>";
          }
          $('#selectvillage').html(html);
      }
      error:function(xhr,type,exception)
      { 
      }
   });
}

注意：您也可以使用get 方法。在get方法的情况下，将地区与URL一起附加，不需要使用_token。

Answer 3

你已经知道如何去做了。这是它的工作示例。

对 district 更改事件运行 AJAX 调用。从数据库中获取与该地区相关的村庄列表并将其附加到 village select options。

$('#selectdistrict').on('change', function () {
  const districtName = $(this).val();
  if (districtName) {
    $.ajax({
      type: "GET",
      url: "/get-village-list?district_name="+districtName,
      success: (data, status, xhr) => {
        if (data) {
          $("#selectvillage").empty();
          $.each(res, (key, value) => {
            $("#selectvillage").append(
              '<option value="' + value.name + '">' + value.name + '</option>'
            );
          });
        } else {
          $("#selectvillage").empty();
        }
      }
    });
  } else {
    $("#selectvillage").empty();
  }
});