Emanuel Schiendorfer Emanuel Schiendorfer - 6 months ago 19
Javascript Question

if title of selected option equals classname of div

Hello I have found a lot about "selected options equals", but I dont manage to solve the following problem. The idea is, to show the divs only, if their classname equals the title of the selected option.



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_5" id="group_5" class="form-control attribute_select no-print">
<option value="bitte" selected="selected" title="fake">Bitte wählen</option>
<option value="35" title="Stoffbeutel">Stoffbeutel 28</option>
<option value="36" title="Plastikbeutel">Plastikbeutel 28</option>
</select>

<div class="lagerbestand-attribute">
<div class="Stoffbeutel"> Stoffbeutel: 5 Stücke</div>
<div class="Plastikbeutel"> Plastikbeutel: 5 Stücke</div>
</div>





Is this possible with jquery? Please note, that I can't use the direct solution like: if($(this).val() == 'Stoffbeutel')

I need it somehow with help of title oder classname...

Answer

This is fairly straightforward using jquery. Hide both divs, and when the dropdown changes find the appropriate one to show and hide all the others.

$('.lagerbestand-attribute div').hide();
$('select').change(function(){
    $('.lagerbestand-attribute div.' + $(':selected',this).attr('title')).show().siblings().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_5" id="group_5" class="form-control attribute_select no-print">
  <option value="bitte" selected="selected" title="fake">Bitte wählen</option>
  <option value="35" title="Stoffbeutel">Stoffbeutel 28</option>
  <option value="36" title="Plastikbeutel">Plastikbeutel 28</option>
</select>

<div class="lagerbestand-attribute">
  <div class="Stoffbeutel"> Stoffbeutel: 5 Stücke</div>
  <div class="Plastikbeutel"> Plastikbeutel: 5 Stücke</div>
</div>