帶有圖像出現在選區上的JS列表

Question

我帶走了我的第一個JS類，並且我們需要做一個選擇列表，使得出現圖像。

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