Question

这些是我的HTML代码：

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

对不起我的代码，我主要是在shcool学习

我想创建一个添加图片的事件，同时在75％的witdh中选择了一个选项标签并以屏幕为中心

我还没有学过关于javascript的所有内容，很抱歉

Answer 1

您可以在更改事件中使用jquery并更改图像，我使用了data属性来获取图片网址：

见下面的代码段

＆＃13;

$(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", "");
     }
  })
  
});

＆＃13;

#picture {
  width:70%;
  height:200px;
  position:relative;
  margin:auto;
}

.container {
  text-align:center;
}

＆＃13;

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

＆＃13;

Answer 2

我提出了这个解决方案：

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>

它基本上定义了一个对象，其中包含来自select和相关图像路径的所有选项 - 文本，监听选择菜单中的每个更改，并根据所选对象显示或隐藏图像。我们使用CSS来居中，拉伸和居中图像。

如果存在未在pictures对象中定义的选项文本，则图像元素将被隐藏，并且在所选选项文本存在之前不会显示。

Answer 3

您可以使用JQuery

<html>
   <head>
      <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script>
         function AddImage(){
         	var pathImg = $("#mySelect option:selected").val();
         	var htmImg = "<img src='"+ pathImg +"'>";
         	$("#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>

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

3 个答案: