Как установить выпадающие значения поля `select` на основе выбранной опции в другом поле` select`

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

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


</select>

Параметр ожидаемого значения отправляется с контроллера, устанавливается в поле выбора selectvillage.

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

$('#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 "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

Таким образом, каждый раз, когда меняется район, ваш звонок будет получать весь список деревень с сервера и показывать на вашей странице. Не забудьте добавить JQuery, прежде чем делать вызов AJAX на вашей странице
Надеюсь, это помогло.