Question

我创建了4个下拉列表。

第一个用于选择模块长度的下拉列表。
第二个下拉列表，用于更改模块颜色。
第三下拉列表，用于选择模块的一部分。
第四下拉列表，我们可以在模块的特定部分添加图像。

我尝试添加图像，但是如何添加图像特定的下拉列表值。

脚本代码

使用数组值放置所选图像的模块位置

        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;
    }
}

颜色模块的不同类型

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

   w4_Red: ["w4_Red.png"],

   w4_Amber: ["w4_Amber.png"]
}

使用段函数

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循环从此处开始

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);
  }
}

使用数组值可以在模块上的特定位置选择不同的颜色

var colorCombFront = 
{

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

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

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

更改颜色

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>

下拉列表1选择长度

长度

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

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

下拉列表以显示要在模块上显示的不同颜色

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

更改id bowcolor的功能

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

                     });
            </script>

          </div>

更改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">

不同模块

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

从下拉列表中选择正确的图像

0 个答案: