如何通過下拉菜單選擇圖片事件？

這是我的HTML代碼：如何通過下拉菜單選擇圖片事件？

<select> 
<option>Pic1</option> 
<option>Pic2</option> 
<option>Pic3/option> 
<option>Pic4</option> 
</select>

對不起，我的代碼，我只是主要在鍛鍊狀況

我想打，雖然一個選項標籤已在75個選擇添加圖片的情況下學習witdh的％和屏幕

我還沒有了解所有的JavaScript，洙對不起

來源

2017-08-02 Jhonrey Daffon

你有沒有學到任何JS？花一點時間理解基礎知識，然後在遇到錯誤時再回來可能是值得的。 –

您應該先搜索並嘗試解決該問題，向我們提供您迄今爲止已嘗試的內容以及哪些內容無效。 –

您可以在更改事件使用jQuery和改變形象，我已經爲本使用的數據屬性來獲取圖片網址：

參見下面的代碼片段

$(function(){ 
 
    $("#select-pic").on("change",function(e){ 
 
    var url = $(this).find(':selected').data('pic-url'); 
 
     
 
    if(url) { 
 
     $("#picture").attr('src',url); 
 
    } 
 
    else { 
 
     $("#picture").attr("src", ""); 
 
    } 
 
    }) 
 
    
 
});

#picture { 
 
    width:70%; 
 
    height:200px; 
 
    position:relative; 
 
    margin:auto; 
 
} 
 

 
.container { 
 
    text-align:center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="select-pic"> 
 
    <option></option> 
 
    <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture1' >Pic1</option> 
 
    <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture2' >Pic2</option> 
 
    <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture3' >Pic3</option> 
 
    <option data-pic-url='https://dummyimage.com/500x200/e85d00/6b7de0.png&text=+picture4' >Pic4</option> 
 
</select> 
 

 
<div class="container"> 
 
    <img id="picture" /> 
 
</div>

來源

2017-08-02 14:56:19

我認爲OP要求的圖像是_「witdh的75％和居中在屏幕上」_ –

done thnx @JamesDouglas –

我想出了這個解決方案：

var pictures = { 
 
    "Pic1": "http://via.placeholder.com/500x200/9575cd/ffffff", 
 
    "Pic2": "http://via.placeholder.com/500x200/64b5f6/ffffff", 
 
    "Pic3": "http://via.placeholder.com/500x200/4db6ac/ffffff", 
 
    "Pic4": "http://via.placeholder.com/500x200/ffb74d/ffffff", 
 
}; 
 

 
var container = $("#image-container"); 
 
$("select").on("change", function (event) { 
 
    var element = $("option:selected", this), 
 
     value = element.text(), 
 
     image = pictures[value] || null, 
 
     imageElement = $("#image-container > img"); 
 

 
    if (image !== null) { 
 
     imageElement.show(); 
 
     
 
     // don' change anything if the image is not defined. 
 
     if (imageElement.length > 0) { 
 
      imageElement.attr("src", image); 
 
     } else { 
 
      container.append('<img src="' + image + '" alt="wide image" />') 
 
     } 
 
    } else { 
 
     imageElement.hide(); 
 
    } 
 
});

#image-container { 
 
    margin: 10px 0; 
 
    text-align: center; 
 
} 
 
#image-container > img { 
 
    width: 75%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option selected disabled>Choose an image</option> 
 
    <option>Pic1</option> 
 
    <option>Pic2</option> 
 
    <option>Pic3</option> 
 
    <option>Pic4</option> 
 
    <option>Pic5</option> 
 
</select> 
 

 
<div id="image-container"></div>

它基本上定義了一個對象，其中包含選擇和相關圖像路徑中的所有選項 - 文本，根據所選對象監聽選擇菜單中的每個更改並顯示或隱藏圖像。我們使用CSS來居中，拉伸和居中圖像。

如果存在pictures對象中沒有定義的選項文本，圖像元素將被隱藏並且不會顯示，直到所選選項文本存在。

來源

2017-08-02 15:15:38 Spingolini

您可以使用jQuery

<html> 
 
    <head> 
 
     <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> 
 
     <script> 
 
     function AddImage(){ 
 
      \t var pathImg = $("#mySelect option:selected").val(); 
 
      \t var htmImg = "<img src='"+ pathImg +"'>"; 
 
      \t $("#destiny").html(htmImg); 
 
     } 
 
     </script> 
 
    </head> 
 
    <body> 
 
     <select id="mySelect" onchange="AddImage()"> 
 
     <option></option> 
 
     <option value="https://cdn.pixabay.com/photo/2017/01/06/19/15/soap-bubble-1958650_960_720.jpg">pic1</option> 
 
     <option value="https://www.w3schools.com/css/trolltunga.jpg">pic2</option> 
 
     <option value="https://static.pexels.com/photos/34950/pexels-photo.jpg">pic3</option> 
 
     </select> 
 
     <div id="destiny" style="width:75%; text-align: center;"></div> 
 
    </body> 
 
</html>

來源

2017-08-02 15:25:14 eduardomx89

如何通過下拉菜單選擇圖片事件？

回答

相關問題