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.
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>