如何通过下拉菜单选择图片事件？

这是我的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

如何通过下拉菜单选择图片事件？

回答

相关问题