ドロップダウンから選択した後に画像を表示

Question

色分けチェンジャーを使用して画像を変更する方法を知りたいですか？たとえば、私は別の車のブランドを持っているドロップダウンメニューを持っています。フォード、GMC、日産私は車を選んだ後、モデルによって分類され、モデルを選び、そのモデルからデフォルトの画像が表示されます。モデル車のdiv色のボックスを使って、私は青を選んだと言うことができます。画像をmakeモデルと色で表示します。しかし、私はモデルとすべての色の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() 
    } 

注、私はあなたのイメージ名などの接尾辞に対応している必要があり、あなたのカラーbocesに追加のデータ属性data-colorNameを追加しました。 data-colorName="blue"