Depending on Select option change others value on div and input field in Laravel-CodePudding

I'm in the learning period. I need a solution but I couldn't find it.

I have a dynamic select option. I want that, when the select option is changed it will show all the related columns from the database in another div.

DB Table Name: Offers

Column Name: id, name, details, recharge

Controller:

$offers = Offer::all();
return view('sim_sale', compact('offers'));

Blade File:

<select name="offer_id" id="offer" class="form-control">
    <option value=""> Select Offer</option>
    @foreach ( $offers as $row )
    <option value="{{ $row->id }}">{{ $row->name }}</option>
    @endforeach
</select>
 <div id="offer-details">
     {{$offers->details}
 </div> 
 <input type="text" value="{{$offers->recharge}}" id="offer-recharge" />

Here, if the select option changes, it will show the details and recharge, else nothing will show in these fields. Also, Users can put data in the input field.

Please help me to solve it.

CodePudding user response：

I have figured out a solution for this. Here is my code:

 <select name="offer_id" id="parent_id" class="form-control dynamic" data-dependent="details">
       <option value=""> Select Offer</option>
       @foreach ( $offers as $row )
       <option value="{{ $row->id }}">{{ $row->name }}</option>
       @endforeach
       </select>
       @foreach($offers as $row)  
       <div class="some"  id="some_{{ $row->id }}"  style="display:none;">
        {{ $row->details }}
       </div>
       @endforeach

<script type="text/javascript">
$('#parent_id').on('change',function(){
$(".some").hide();
var some = $(this).find('option:selected').val();
$("#some_"   some).show();}); </script>