画像が選択範囲に表示されたJSリスト

Question

私は最初のJSクラスを取ったので、selectメイクの画像を表示するリストを作成する必要があります。

<select name="entree" id="entree" onChange="changeit(this.value)"> 
    <option value="hidden" selected>Choisir...</option> 
    <option value="hidden2">Salade</option> 
    <option value="hidden3">Escargot</option> 
    </select><br /><br /> 

これまでのところ、これは私が持っているものです。私は、選択されたときに正しいイメージを表示するためにどのような機能を作成するのかを知るために助けが必要です。誰かがサラダの価値を選ぶと、サラダの絵が現れます。誰かが「Choisir ...」を選択した場合、imgは表示されません。

おかげで助け

Answer 1

のためにあなたは、変更イベントに、あなたの選択ボックスの値をチェックし、プレビュー画像のためのsrcを変更する必要があります。この例は、この問題を理解し、理解するのに役立つと思います。

$(document).ready(function() { 
 

 
    $("#entree").on("change", function() { 
 

 
    if ($(this).val() === "salade") { 
 
     $("#imgselect").attr("src", "https://druxys.com/wp-content/uploads/2016/11/SaladThumb-GardenSalad.png"); 
 
    } 
 
    }); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<select name="entree" id="entree" onChange="changeit(this.value)"> 
 
    <option value="hidden" selected>Choisir...</option> 
 
    <option value="salade">Salade</option> 
 
    <option value="hidden3">Escargot</option> 
 
    </select><br /> 
 

 

 
<img id="imgselect" src="" alt="demo" />

私はそこchangeit機能に気付かなかった、ここJAVASCRIPT方法です。

function changeit(option) { 
 

 
    console.log(option); 
 
    if (option === "salade") 
 
    document.getElementById("imgselect").setAttribute("src", "https://druxys.com/wp-content/uploads/2016/11/SaladThumb-GardenSalad.png"); 
 

 
}

<select name="entree" id="entree" onChange="changeit(this.value)"> 
 
    <option value="hidden" selected>Choisir...</option> 
 
    <option value="salade">Salade</option> 
 
    <option value="hidden3">Escargot</option> 
 
    </select><br /> 
 

 

 
<img id="imgselect" src="" alt="demo" />