¿Cómo puedo mostrar los valores de opción de otra selección en función del primer valor de selección?
<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>mi controlador
public function create() { $data=MModel::all(); $datamarka=Marka::all(); return view('admin.seri.create',['data'=>$data,'datamarka'=>$datamarka,]); }Puede usar el evento JavaScript o JQuery de onselect y obtener el valor o el texto de la opción desplegable seleccionada y usar la función $.get() o $.post() o $.Ajax() de JQuery para recuperar el valor que desea en función en los datos actuales proporcionados desde la opción desplegable.
Cuando la función Ajax recupera los datos del controlador, puede agregarlos al menú desplegable que desee.
si no te quedó claro, solo házmelo saber para ponerte un código de ejemplo también.
<!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>Escribí este código usando el ejemplo, funcionó para mí.
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'; } }