javascript - 从下拉列表中选择后显示图像

Question

我想知道如何使用颜色 div 转换器更改图像？

例如，我有一个下拉菜单，其中包含不同的汽车品牌，例如福特、GMC、日产，然后我选择一辆车，然后按型号分类，然后我选择一个型号，然后会显示该型号的默认图像。

现在我想使用 div 颜色框更改模型车辆的颜色假设我选择蓝色，我希望图像显示品牌模型和颜色，但我不想显示所有颜色 div模型。

请随时提出更多关于我想做什么的问题。

 function fctCheck(brand) {
   var elems = document.getElementsByName("subselector");
   for (var i = 0; i < elems.length; i++) {
     elems.item(i).style.display = "none";
   }
   document.getElementById(brand).style.display = "block";
 }

 function setCar() {
   var img = document.getElementById("image");
   img.src = this.value;
   return false;
 }
 document.getElementById("ford").onchange = setCar;

 function setCar() {
   var img = document.getElementById("image");
   img.src = this.value;
   return false;
 }
 document.getElementById("gmc").onchange = setCar;

 function setCar() {
   var img = document.getElementById("image");
   img.src = this.value;
   return false;
 }
 document.getElementById("nissan").onchange = setCar;

 function setCar() {
   var img = document.getElementById("image");
   img.src = this.value;
   return false;
 }
 document.getElementById("dodge").onchange = setCar;

.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}.blue {
  background: #1713F6;
}.purple {
  background: #AB09D3;
}.black {
  background: #000000;
}
​

<div id="colour">
            <div class="foo white" data-color="#FFFFFF">
            </div>
            <div class="foo black" data-color="#000000">
            </div>
            <div class="foo yellow" data-color="#FAFF38">
            </div>
            <div class="foo orange" data-color="#FFA200">
            </div>
            <div class="foo red" data-color="#FF0000">
            </div>
            <div class="foo dorange" data-color="#FF5500">
            </div>
            <div class="foo lgreen" data-color="#80FF00">
            </div>
            <div class="foo green" data-color="#45C731">
            </div>
            <div class="foo turk" data-color="#17DDBC">
            </div>
            <div class="foo lblue" data-color="#00A2ff">
            </div>
            <div class="foo blue" data-color="#1713F6">
            </div>
            <div class="foo purple" data-color="#AB09D3">
            </div>
        </div>

<select id="brand" onchange="fctCheck(this.value);">
  <option value="">Choose an item</option>
  <option value="ford">ford</option>
  <option value="gmc">gmc</option>
  <option value="nissan">nissan</option>
  <option value="dodge">dodge</option>
</select>


<img id="image" src="Null_Image.png" />
<select id="ford" name="subselector" style="display:none">
  <option value="http://mebe.co/mustang">mustang</option>
  <option value="http://mebe.co/f150">f150</option>
</select>

<select id="gmc" name="subselector" style="display:none">
  <option value="http://mebe.co/yukon">yukon</option>
  <option value="http://mebe.co/1500">1500</option>
</select>

<select id="nissan" name="subselector" style="display:none">
  <option value="http://mebe.co/sentra">sentra</option>
  <option value="http://mebe.co/gtr">gtr35</option>
</select>

<select id="dodge" name="subselector" style="display:none">
  <option value="http://mebe.co/dart">dart</option>
  <option value="http://mebe.co/challenger">challenger</option>
</select>

Answer 1

   var theCar;//Declare the variable for the car in global scope

   function setCar(whatCar) {
       var img = document.getElementById("image");
       img.src = whatCar+"_default.jpg";//eg. dodge_default.jpg
       theCar=whatCar;//set the value of `theCar` to the currently selected car
       }

   document.getElementById("brand").onchange = setCar(this.value);
   //etc.

     function SetColor(whatColor){
     var img = document.getElementById("image");
     img.src = theCar + "_" + whatColor + ".jpg";//eg. dodge_blue.jpg
     }

     var colors=document.getElementsByClassName("foo");//select all the color boxes
     for(var i = 0; i < colors.length; i++) {//loop through them
     colors[i].addEventListener('click', SetColor(colors[i].dataset.colorName));//and attach to each the event lisner for a click which fires the function SetColor()
     }

请注意，我已将额外的数据属性 data-colorName 添加到您的颜色 boces 中，该属性必须与您的图像名称的后缀相对应，例如。data-colorName="blue"