javascript - 从一个下拉列表中获取选定的值以在另一个下拉列表中使用它

在我看来，我有两个下拉菜单，第一个下拉菜单有项目，第二个下拉菜单没有项目。看起来像这样：

<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');

最佳答案

您可以尝试这样，由于我对您的控制器功能有些困惑，“我的答案”不会给您100％的解决方案。但我希望它能对您有所帮助。

首先，在函数中获取Request data时，您的路由必须为POST。

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

在meta中添加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>");
  }
  }
 });
});

关于javascript - 从一个下拉列表中获取选定的值以在另一个下拉列表中使用它，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56070290/