Anzeige Bild nach Auswahl aus Drop-down

Question

Ich würde gerne wissen, wie ich Bilder mit Farbe Div Wechsler ändern kann? Zum Beispiel habe ich ein Dropdown-Menü, das verschiedene Automarken hat Beispiel Ford, GMC, Nissan, dann wähle ich ein Fahrzeug, dann wird es nach Modell kategorisiert, dann wähle ich ein Modell und ein Standardbild wird von diesem Modell angezeigt, jetzt möchte ich die Farbe ändern des Modellfahrzeugs, das div-Farbkästen benutzt, lässt sagen, dass ich blaues wähle, ich will ein Bild, um mit dem Fabrikatmodell und -farbe anzuzeigen. aber ich möchte nicht alle Farbdivs mit den Modellen anzeigen. Bitte zögern Sie nicht, weitere Fragen zu stellen, was ich tun möchte.

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

Hinweis, ich habe zusätzliche Daten hinzugefügt data-colorName zu Ihrer Farbe BOCES Attribut, das auf dem Suffix Ihrer Bildnamen zB entsprechen. data-colorName="blue"