你如何在 JS 中的每个选项旁边创建一个带有图像的 drop-menu？

Question

我查了几个关于如何获取标题旁边图像的教程，但是它们是针对手动输入的小数据集。有将近3000行数据，必须有更好的方法。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" SameSite=None; Secure>
  <title>Document</title>

  <script
    type="text/javascript"
    src="https://d3js.org/d3.v3.js"
  ></script>
  <style id="compiled-css" type="text/css">
  
  </style>
</head>
<body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>
  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="static/js/app.js"></script>
  <script></script>
</body>
</html>

我编辑了代码和数据。我在 vs 代码控制台和 http 控制台中都没有收到任何错误。然而，文本出现在 drop-menu 中，但图像中没有。

d3.csv("https://raw.githubusercontent.com/Shannon-Goddard/grow_data/main/Resources/csv/ALL_data.csv", function(error, data) {
    var select = d3.select("body")
      .append("div")
      .append("select")

    select
      .on("change", function(d) {
        $("#idselector").select2();
        var value = d3.select(this).property("value");
        alert(value);
      });

      select.selectAll("option")
      .data(data)
      .enter()
        .append("option")
        .text(function (d) { return d.strain; })
        .append(function(d) {
          const logo = document.createElement('img');
          logo.src = d.logo;
          return logo;
      });

});

我的 vs 代码控制台和 http 控制台都没有错误...

Answer 1

你的图像在那里，JavaScript 只是不支持本地显示它们，Select2 似乎配置错误。如果您检查 <option> 元素上的元素，您会在那里看到您的图像，但 Select2 不知道要渲染它们。使用 Select2 渲染图像的示例倾向于 .

虽然如果您删除 Select2 作为依赖项，问题实际上是 How to add images in select list? 的重复，但是问题很老，许多答案已经过时。

由于您的其他问题提到了 jQuery，我建议您尝试使用 jQuery 的 Select 带有自定义渲染器的菜单。

https://jqueryui.com/selectmenu/#custom_render

请特别注意带有“Select 一个人”（例如“John Resig”）的 data-style 示例，因为它使用了一些 style-injection 以便您可以动态添加所有图像都以样式标签的形式添加到您的 HTML 中。

style: item.element.attr( "data-style" )

这是从 data-style="..." 中提取的，但是要特别注意特殊的 HTML 转义，在注入这样的样式时，这是强制性的，例如 ' 等

<option value="1" data-class="avatar" data-style="background-image: url(&apos;http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&amp;r=g&amp;s=16&apos;);">John Resig</option>

为了简化这一点并避免一些难看的 HTML 转义，我建议您只将图像 URL 存储在 data 属性中（例如重命名为 data-image) 并从 JavaScript 手动构造样式标签，例如style: "background-image: url('" + item.element.attr( "data-image" ) + "');"

为 drop-down 设置正确的图像大小和样式需要一些工作，但这正是 jQuery Select 菜单的自定义渲染器的目的。如果您发现渲染不适合您的需要，我们提出了一些 non-jQuery 替代方案 here.

你如何在 JS 中的每个选项旁边创建一个带有图像的 drop-menu？

How do you create a drop-menu with images next to each option in JS?

javascript

jquery-select2