时间戳

首页 > 解决方案 > 如何从下拉菜单中获取选项（每个可能的选择）以嵌入图像

html - 如何从下拉菜单中获取选项（每个可能的选择）以嵌入图像

问题描述

我不知道该放什么而不是href，因为它们无法嵌入图像。如果你能在这里帮忙，那就太好了。你可能知道我最近发布了一个类似的问题，但不是很清楚，答案也没有帮助，但还是谢谢你。这是代码：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropdown {
  display: inline-block;
  margin-left; 15px;
  position: relative;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align:center;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
</head>
<body>

<div class="dropdown">
  <button class="dropbtn">Select Skin</button>
  <div class="dropdown-content">
    <a href="#">Mumbo</a>
    <a href="#">Grian</a>
    <a href="#">Iskall</a> 
</div>
</div>

</body>

标签： htmlimagedrop-down-menuembed

解决方案

我从您那里了解到的是当您单击下拉列表的选项时嵌入图像

我建议的方法是data-src为选项设置一个类型的属性，然后使用 jquery 获取该值并将其附加到div单击时

$(document).ready(function(){
  $(".dropdown-content a").click(function(){
     $(".embeded-images").append("<img src='" + $(this).data("img") + "' />");
  });
});
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

.dropdown {
  display: inline-block;
  margin-left; 15px;
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  text-align:center;
  display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="dropdown">
  <button class="dropbtn">Select Skin</button>
  <div class="dropdown-content">
    <a href="#" data-img="https://img.freepik.com/free-vector/glass-transparent-christmas-ball-with-snow_118124-1557.jpg?size=338&ext=jpg">Mumbo</a>
    <a href="#" data-img="https://img.freepik.com/free-photo/coffee-topped-with-whipped-cream-coffee-seeds_140725-1121.jpg?size=338&ext=jpg">Grian</a>
    <a href="#" data-img="https://img.freepik.com/free-vector/fireworks-new-year-2020-background_52683-29350.jpg?size=664&ext=jpg">Iskall</a> 
  </div>
</div>

<div class="embeded-images"></div>

推荐阅读