When value is selected show image

Question

first of all I am pretty new to javascript/jQuery. But I did make a code that show's an image when a specific option is selected. But the code is very long and I am asking myself if I can make my code shorter.

Here is the HTML:

<div class="form-group">
                        <label>Ik ben op zoek naar een:</label>
                        <select name="inputType" form="carform" class="form-control" id="inputType" name="inputType" title="inputType" required>
                          <option disabled selected value>Selecteer een optie</option>
                          <option value="greenlineveranda">Greenline veranda</option>
                          <option value="profilineveranda">Profiline veranda</option>
                          <option value="highlineveranda">Highline veranda</option>
                          <option value="aluminiumtuinkamer">Aluminium tuinkamer</option>
                          <option value="glasschuifwanden">Glasschuifwanden</option>
                          <option value="carportgebogen">Carport gebogen</option>
                          <option value="carportvlak">Carport vlak</option>
                          <option value="aluminiumschutting">Aluminium schutting</option>
                          <option value="composietschutting">Composiet schutting</option>
                        </select>
                    </div>

And here is the jQuery behind it:

$('[name=inputType]').change(function(){
        if($(this).val() === 'greenlineveranda') {
             $('#greenlinePicture').css("display","block");
        }
        else {
             $('#greenlinePicture').css("display","none");
        }
        if($(this).val() === 'profilineveranda') {
             $('#profilinePicture').css("display","block");
        }
        else {
             $('#profilinePicture').css("display","none");
        }
        if($(this).val() === 'highlineveranda') {
             $('#highlinePicture').css("display","block");
        }
        else {
             $('#highlinePicture').css("display","none");
        }
        if($(this).val() === 'aluminiumtuinkamer') {
             $('#aluminiumtuinkamerPicture').css("display","block");
        }
        else {
             $('#aluminiumtuinkamerPicture').css("display","none");
        }
        if($(this).val() === 'glasschuifwanden') {
             $('#glasschuifwandenPicture').css("display","block");
        }
        else {
             $('#glasschuifwandenPicture').css("display","none");
        }
        if($(this).val() === 'carportgebogen') {
             $('#carportgebogenPicture').css("display","block");
        }
        else {
             $('#carportgebogenPicture').css("display","none");
        }
        if($(this).val() === 'carportvlak') {
             $('#carportvlakPicture').css("display","block");
        }
        else {
             $('#carportvlakPicture').css("display","none");
        }
        if($(this).val() === 'aluminiumschutting') {
             $('#aluminiumschuttingPicture').css("display","block");
        }
        else {
             $('#aluminiumschuttingPicture').css("display","none");
        }
        if($(this).val() === 'composietschutting') {
             $('#composietschuttingPicture').css("display","block");
        }
        else {
             $('#composietschuttingPicture').css("display","none");
        }
    });

Can I make the jQuery function shorter?
Thanks for your time!

Answer 1

I do in this way if u want to use id no problem, just add class to make images visible. Sorry for my bad English.

$(document).ready(function(){
  $('select[name="inputType"]').on('change', function(e) {
    var v = $(this).val();
    $('img').removeClass('show').filter('#' + v + 'Picture').addClass('show');
  });
});

img{ display: none;}
img.show{ display: inline;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group">
                        <label>Ik ben op zoek naar een:</label>
                        <select name="inputType" form="carform" class="form-control" id="inputType" name="inputType" title="inputType" required>
                          <option disabled selected value>Selecteer een optie</option>
                          <option value="greenlineveranda">Greenline veranda</option>
                          <option value="profilineveranda">Profiline veranda</option>
                          <option value="highlineveranda">Highline veranda</option>
                          <option value="aluminiumtuinkamer">Aluminium tuinkamer</option>
                          <option value="glasschuifwanden">Glasschuifwanden</option>
                          <option value="carportgebogen">Carport gebogen</option>
                          <option value="carportvlak">Carport vlak</option>
                          <option value="aluminiumschutting">Aluminium schutting</option>
                          <option value="composietschutting">Composiet schutting</option>
                        </select>
                    </div>
                    
                    <img src="https://dummyimage.com/200x200/000/fff" id="greenlineverandaPicture">
                    <img src="https://dummyimage.com/200x200/333/fff" id="profilineverandaPicture">
                    <img src="https://dummyimage.com/200x200/555/fff" id="highlineverandaPicture">
                    <img src="https://dummyimage.com/200x200/777/fff" id="aluminiumtuinkamerPicture">
                    <img src="https://dummyimage.com/200x200/999/fff" id="glasschuifwandenPicture">
                    <img src="https://dummyimage.com/200x200/aaa/fff" id="carportgebogenPicture">
                    <img src="https://dummyimage.com/200x200/ccc/fff" id="carportvlakPicture">
                    <img src="https://dummyimage.com/200x200/eee/000" id="aluminiumschuttingPicture">
                    <img src="https://dummyimage.com/200x200/fff/000" id="composietschuttingPicture">

Answer 2

add a class "pics" to every pictures.

<img src="..." class="pics">

and set an id for each picture

<img src="..." class="pics" id="pic_aaaaaaa">
<img src="..." class="pics" id="pic_bbbbbbb">
<img src="..." class="pics" id="pic_ccccccc">

So, on change hide all pictures

 $('.pics').css("display","none");

and show only the selected one:

$('[name=inputType]').change(function(){
   var selected_id = $(this).val()
   $('#pic_' + selected_id).css("display","block");
});

Answer 3

One way you could do this would be to map the values to the ids, and use the object to lookup which id to show.

var pictures = {
  'greenlineveranda': '#greenlinePicture',
  'profilineveranda': '#profilinePicture',
  'highlineveranda': '#highlinePicture'
};

$('[name=inputType]').change(function() {
  $(Object.values(pictures).join(',')).css('display', none');
  $(pictures[this.value]).css('display', block');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>