How can I show option values of other select based on first select value?
<div class="mb-3">
<label for="defaultSelect" class="form-label">Marka Seç</label>
<select id="defaultSelect" class="form-select" name="marka_id">
@foreach($datamarka as $rs)
<option value="{{$rs->id}}">{{$rs->name}}</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label for="defaultSelect" class="form-label">Model Seç</label>
<select id="defaultSelect" class="form-select" name="marka_id">
<option value="">try</option>
</select>
</div>
My controller
public function create() {
$data=MModel::all();
$datamarka=Marka::all();
return view('admin.seri.create',['data'=>$data,'datamarka'=>$datamarka,]);
}
You can use JavaScript or JQuery event of onselect and get the value or text of the selected dropdown option and use the $.get() or $.post() or $.Ajax() function of JQuery to retrieve value that you want based on the current data provided from the dropdown option.
When the Ajax function retrieves the data from the Controller, You can add it to the dropdown of your choice that you want.
if it was not clear for you, just let me know to put an example code for you as well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Get Selected Dropdown value using JQuery OnChange</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
<form action="{{ route('admin.save') }}" class="gender">
@csrf
<label>Gender:</label>
<select name='gender' id="select">
<option value='male' >Male</option>
<option value='female' >Female</option>
</select>
<input type='text' id='text'>
</form>
</body>
</html>
<script>
$( "select" ).change(function() {
var val= $(this).val();
$("#text").val(val);
data = { _token: get the token data using jquery selectors
value1 : $(this).val(),
value2 : $('#text').val()
}
$.post($('form.gender').attr('action'), { data }, function
(response, status){
$('select').append(response.data);
}
});
</script>
I wrote this code using the example, it worked for me
function update() {
var select = document.getElementById('defaultSelect');
var option = select.options[select.selectedIndex];
//console.log(option.innerHTML)//seçilen marka
var model = document.getElementById('defaultSelect1');
var option1 = model.options;
for(let i=0;i<option1.length;i++){
if(option.innerHTML!=option1[i].id){
if(option1[i].value!='null'){
console.log(option1[i])
//model.remove(i);
option1[i].classList.add('hidden');
}
}
if(option.innerHTML==option1[i].id){
if(option1[i].value!='null'){
console.log(option1[i])
//model.remove(i);
option1[i].classList.remove('hidden');
}
}
}
if(option.value!='null'){
document.getElementById('modeldiv').className='mb-3';
document.getElementById('seridiv').className='mb-3 row';
}
}