Получить выбранное значение из раскрывающегося списка, чтобы использовать его в другом раскрывающемся списке Laravel

Question

На мой взгляд, у меня есть два раскрывающихся списка, в первом из которых есть элементы, а во втором нет элементов. Это выглядит так:

<form action="http://localhost/AutoFill/public/handle-form" method="POST">
    <div>
	City:<br>

	<select name="city">
		<option value="">Choose Place</option>
		<option value="0">HCM</option>
		<option value="1">HN</option>				
	</select>
    </div>         
    <br>
                            
    <div>
	Ward:<br>

	<select name="ward">
	    <option value="">---</option>
	</select>
    </div>    
    <br>
</form>

Теперь я хочу получить значение первого раскрывающегося списка, чтобы заполнить данные во втором раскрывающемся списке. Я создаю функцию в моем контроллере для возвращенных вторых раскрывающихся данных:

public function getSecondEnumData(Request $request)
{
    $firstEnumSelected = $request->city;

    $client = new Client();
    if ($firstEnumSelected === 0) {
        $enumValueResponse = $client->request('GET', 'https://api.myjson.com/bins/zcyj2');
    } else {
        $enumValueResponse = $client->request('GET', 'https://api.myjson.com/bins/1bx7e6');
    }

    return json_decode($enumValueResponse->getBody(), true);
}

Я искал какой-то пост здесь, и я думаю, что должен написать какой-то код JavaScript, на мой взгляд, чтобы сделать это, но я не знаком с ним, так что вы можете мне помочь?

Маршрут

Route::get('/', 'RestController@getFirstEnumData');

Answer 1

Поместите следующий код чуть выше тега </body>, измените успех в соответствии с вашими данными ответа, а также URL в соответствии с вашим URL

  <script>
    let origin = document.querySelector(select[name='city'])
    let target = document.querySelector(select[name='ward'])
    origin.addEventListener('change', function(){
      $.ajax({
         url: '{{ url('/') }}',
         method: 'POST',
         data:{ city: origin.value, _token: '{{ csrf_token() }}' },
         success: function(response){
            response.forEach((opt) => {
             target.innerHTML += `<option value=${opt.id}>${opt.value}</option>` //this varies according to your response data
          })
         }

      })
    })
    </script>

Answer 2

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

Прежде всего ваш маршрут должен быть POST, поскольку вы принимаете данные запроса в функции.

Route::POST('getFirstEnumData', 'RestController@getSecondEnumData');

добавить csrf в мета

<meta name="csrf-token" content="{{ csrf_token() }}" />

А потом

<form action="http://localhost/AutoFill/public/handle-form" method="POST">
<div>
City:<br>

<select name="city" id="city">
<option value="">Choose Place</option>
<option value="0">HCM</option>
<option value="1">HN</option>       
</select>
</div>         
<br>

<div>
Ward:<br>

<select name="ward" id="ward">
  <option value="">---</option>
</select>
</div>    
<br>
</form>




$("#city").change(function() { 
var CSRF_TOKEN = $('meta[name="csrf-token"]').attr('content');               
var city = $( "#city" ).val();
$.ajax({    //create an ajax request to get tour list
type: "POST",
url: "/getFirstEnumData",
data : ({
  _token: CSRF_TOKEN, 
  city : city
}),                           
success: function(response){
  var responseData = JSON.parse(response);
  var dataLength = responseData.length;
  $("#ward").empty();

  $("#ward").append("<option value=''>Select</option>");
  for( var i = 0; i< dataLength; i++){
      var id = responseData[i].id;
      var name = responseData[i].name;
      $("#ward").append("<option value='"+id+"'>" + name + "(" + name+")"+" 
   </option>");
  }                 
  }
 });
});