The issue is when I select a department its shows users names in a single line with a coma I want to show users in the dropdown like when user select department and designation then user show in dropdown I have 3 table departments, designation and users, department and designation are foreign key in users
``` department dropdown ```
<label>User Department</label>
<select onchange="changeDep();" name="fwd_department" id="dep_id" required="" class="form-control department_name " style="width: 100%;">
<option value="0" selected="true" disabled="true">Select Department</option>
@foreach($department as $dep)
<option value="{{ $dep->id }}" >{{ $dep->name }}</option>
@endforeach
</select>
``` designation dropdown ```
<label>User Designation</label>
<select onchange="changeDesi();" name="fwd_designation" id="desi_id" required="" class="form-control department_name " style="width: 100%;">
<option value="0" selected="true" disabled="true">Select Department</option>
@foreach($designation as $desi)
<option value="{{ $desi->id }}" >{{ $desi->name }}</option>
@endforeach
</select>
``` users dropdown ```
<label>User Name</label>
<select name="name" required="" class="form-control department_name " style="width: 100%;">
<option value="0" id="us_id" selected="" disabled="">Select user</option>
</select>
``` Java Script code ```
<script>
var selectedValue="";
var selectedValue2="";
var arr = @json($user);
function changeDep() {
var selectBox = document.getElementById("dep_id");
selectedValue = selectBox.options[selectBox.selectedIndex].value;
if(selectedValue2){
filterData = arr.filter(f => f.designation_id == selectedValue2 &&
f.department_id == selectedValue)
}else{
filterData = arr.filter(f => f.department_id == selectedValue)
}
let arrPush = [];
filterData.map(m => {
arrPush.push(m.name)
return m;
})
document.getElementById("us_id").innerHTML = arrPush;
}
function changeDesi() {
var selectBox = document.getElementById("desi_id");
var selectedValue2 = selectBox.options[selectBox.selectedIndex].value;
if(selectedValue){
filterData = arr.filter(f => f.designation_id == selectedValue2 &&
f.department_id == selectedValue)
}else{
filterData = arr.filter(f => f.designation_id == selectedValue2 )
}
let arrPush = [];
filterData.map(m => {
arrPush.push(m.name)
return m;
})
document.getElementById("us_id").innerHTML = arrPush;
}
</script>
[disply page][1]
[1]: https://i.stack.imgur.com/V2sKF.png
```I have no idea how to DO THIS Thanks in advance ```