[英]Get selected value from a dropdown to use it in another dropdown Laravel
In my view, I have two dropdowns, the first dropdown have items and the second dropdown don't have item. 在我看来,我有两个下拉菜单,第一个下拉菜单有项目,第二个下拉菜单没有项目。 It looks like this: 看起来像这样:
<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>
Now I want to get the value of the first dropdown to fill data into the second dropdown. 现在,我想获取第一个下拉列表的值,以将数据填充到第二个下拉列表中。 I create a function in my controller for returned second dropdown data: 我在控制器中为返回的第二个下拉数据创建了一个函数:
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);
}
I searched some post in here, and I think I should write some JavaScript code in my view to do this but I'm not familiar with it so can you help me? 我在这里搜索了一些帖子,我认为我应该写一些JavaScript代码来做到这一点,但是我不熟悉它,所以您可以帮我吗?
Route 路线
Route::get('/', 'RestController@getFirstEnumData');
You can try like this, My Answer will not give you 100% soluton of your problem as I am little bit confused about your controller function. 您可以尝试这样,由于我对您的控制器功能有些困惑,“我的答案”不会为您提供100%的解决方案。 But I hope it will help you. 但我希望它能对您有所帮助。
First of all your route need to be POST as you are taking Request data in the function. 首先,在函数中获取Request data时,您的路由必须为POST。
Route::POST('getFirstEnumData', 'RestController@getSecondEnumData');
add csrf in the meta 在meta中添加csrf
<meta name="csrf-token" content="{{ csrf_token() }}" />
And then 接着
<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>");
}
}
});
});
Place the following code just above your </body>
tag, change the success according to your reponse data, also url according to your url 将以下代码放在</body>
标记的上方,根据您的响应数据更改成功,也根据您的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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.