choose the correct image from dropdownlist

Question

I created 4 dropdown list.

• First dropdownlist for select length of the module.

• Second dropdownlist for change the module color.

• Third dropdown list for select the part of the module.

• Fourth drop downlist we can add image on paticular part of module.

I tried to add images but how can i add images particlular dropdownlist values.

script code

Module places for placing the selected images using array values

        var modulFront = {
    w_4: ["choose", "Front Modul 1", "Front Modul 2", "Front Modul 3", "Front Modul 4"],
    W_3: ["choose", "Front Modul 1", "Front Modul 2", "Front Modul 3", "Front Modul 4", "Front Modul 5"],

}



function changeModul(value) {
    if (value.length == 0) document.getElementById("modulFront").innerHTML = "<option></option>";
    else {
        var catOptions = "";
        for (categoryId in modulFront[value]) {
            catOptions += "<option>" + modulFront[value][categoryId] + "</option>";
        }
        document.getElementById("modulFront").innerHTML = catOptions;
    }
    if (value.length == 0) document.getElementById("modulBack").innerHTML = "<option></option>";
    else {
        var catOptions = "";
        for (categoryId in modulRear[value]) {
            catOptions += "<option>" + modulRear[value][categoryId] + "</option>";
        }
        document.getElementById("modulBack").innerHTML = catOptions;
    }
}

different type of color modules

var picFront = {
    w4_Blue: ["w4_Blue.png"],

   w4_Red: ["w4_Red.png"],

   w4_Amber: ["w4_Amber.png"]
}

using the section function called

function selection(){

if ($("#langd").val() && $("#bowcolor").val()) {

var langdVal = $("#langd").val();
var bowVal = $("#bowcolor").val();
var combineVal = langdVal+"_"+bowVal;
var inputDivHTML_Front = "";
var inputDivHTML_Rear = "";
var picF = picFront[combineVal];
var picB = picRear[combineVal];

for in loop started from here

for(i in picF){
    inputDivHTML_Front += "<img class='showImg' src='"+"bage/"+picF[i]+"' alt='"+picF[i]+"'/>"; 
    inputDivHTML_Rear += "<img class='showImg' src='"+"bage/"+picB[i]+"' alt='"+picB[i]+"'/>"; 
}
$(".bageFront").html(inputDivHTML_Front);
$(".bageBack").html(inputDivHTML_Rear);
  }
}

diffrent colors can choose on particular place on module by using array values

var colorCombFront = 
{

Blue: ["choose", "blue", "red", "green", "white", "amber"],

Red: ["choose", "blue", "red", "green", "white", "amber"],

Amber: ["choose", "blue", "red", "green", "white", "amber"]
 }

change color

function changeColorComb(value) {
    if (value.length == 0) document.getElementById("colorFront").innerHTML = "<option></option>";
    else {
        var catOptions = "";
        for (categoryId in colorCombFront[value]) {
            catOptions += "<option>" + colorCombFront[value][categoryId] + "</option>";
        }
        document.getElementById("colorFront").innerHTML = catOptions;
    }

  }
        </script>













    <div class="vrap">
    <section id="aside">
      <article>
        <form>
          <div>

Dropdownlist 1 choosing length

length

              <option value="">length</option>               
              <option value = "v1">4 moduler</option>
              <option value = "v2">5 moduler</option>

            </select>
            <script>
                $("#length").change(function() {
                      selection();
                });
            </script>

Dropdownlist for diffrent colors to display on the module

            <p>color</p>
            <select id = "bowcolor" name="bowcolor" style="float: left;" onChange="changeColorComb(this.value);">
              <!-- <option value="" disabled selected hidden></option> -->
              <option value="">color</option>               
              <option value = "Blue">Blue</option>
              <option value = "Red">Red</option>
              <option value = "Amber"></option>
            </select>

change function for id bowcolor

            <script>
                $("#bowcolor").change(function() {
                        selection();

                     });
            </script>

          </div>

change function for id colorFront

         <script>
           $('#colorFront').change(function(event){
            $('img').attr('src','flowers'+$(this).val()+'.png'); 
         });

          </script>
          <div>

            <p>Modul och color Front</p>
            <select id = "modulFront" name="modulFront" onchange="selectModulFront(this.value);">
              <option value=""></option>  
    </select>

            <select id = "colorFront" name="colorFront" onchange="selectColorFront(this.value);">
              <option value="blue"></option>
            </select>
          </div>

        </form>
      </article>
    </section>

    <section  id="main">
        <form class="flash">

diffrent modules

        <div class="bageFront" name="bageFront">
                <img class="img-bar" src="bageFront.value" alt="bar