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

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 。

流水作业

Answer 1

试试这些：

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

当一个地区发生变化时，您需要对服务器进行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 3

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

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

$('#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();
  }
});