Using a common JavaScript code, I am able to display a div when a certain value is selected.
$(function() {
$('#craft').change(function(){
$('.colors').hide();
$('#' + $(this).val()).show();
});
});
However, I encountered an issue when trying to make the same JavaScript code work for two select options and divs. Adding another script with different names did not yield the desired results. When selecting an option from the second dropdown list, the contents of the first div show up.
$(function() {
$('#craft2').change(function(){
$('.colors2').hide();
$('#' + $(this).val()).show();
});
});
Here is my complete code:
First set of options and divs:
{!! Form::select('id', $upgradeable_items, null, array('id' => 'craft')) !!}
@foreach($reals as $real)
<div id="{{$real->id}}" class="colors" style=";width: 250px; display:none">
+{{$real->type}} <img style="margin-left: 20px" class="marketpics" src="{{$real->picturePath}}">
</div>
@endforeach
Second set of options and div:
{!! Form::select('id', $charms, null, array('id' => 'craft2')) !!}
@foreach($chars as $char)
<div id="{{$char->item_id}}" class="colors2" style="float: right;width: 250px; display:none">
<img style="margin-left: 20px" class="marketpics" src="{{$char->picturePath}}">
</div>
@endforeach
I am facing an issue where the content overlaps when choosing options in the second dropdown list, it appears in the first div and repeatedly overlaps. However, there is no problem when selecting an option from the first dropdown list, as it correctly displays the content in the first div.