How can I show option values of other select based on first select value? Laravel9-Php-CodePudding

How can I show option values of other select based on first select value?

<div >
    <label for="defaultSelect" >Marka Seç</label>
    <select id="defaultSelect"  name="marka_id">
        @foreach($datamarka as $rs)
            <option value="{{$rs->id}}">{{$rs->name}}</option>
        @endforeach
    </select>
</div>
<div >
    <label for="defaultSelect" >Model Seç</label>
    <select id="defaultSelect"  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,]);
}

CodePudding user response：

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') }}" >
         @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>

CodePudding user response：

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