Question

我有两个<select>框。假设名称为selectdistrict和selectvillage。

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

我是Laravel的新手。我该怎么做才能获得价值？

搜索后，我发现可以使用jQuery完成此操作，使用onChange事件将视图selectdistrict中的值扔给控制器，然后将其返回以填充{{1 }}。但是，我不知道该怎么做。有人可以给我一个提示/或如何处理这种情况吗？

A。选择区

selectvillage

B。选择村

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

期望值选项是从控制器发送的，设置为选择框<select class="form-control" name="selectvillage" id="selectvillage"> </select>。

flow process

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调用。从数据库中获取与该地区相关的村庄的列表，并将其附加到村庄 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();
  }
});

Answer 3

更改地区后，您需要向服务器发出 Ajax呼叫，以获取其村庄。作为回应，您可以显示沿div的村庄（我显示了div ID为“ dynamic_villages_list”的村庄列表）

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

<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
希望能有所帮助。

如何基于其他“选择”框中的所选选项设置“选择”框的下拉值

3 个答案: