时间戳

首页 > 解决方案 > 在 FORM 的选择中使用图像的最佳实践

javascript - 在 FORM 的选择中使用图像的最佳实践

问题描述

我被困在一个表格中，我想知道如何在选择选项中显示图像。

输入将加载文本。

我正在尝试做的...

在此处输入图像描述

在表单中进行这项工作的最佳方法是什么？

这就是我所做的。

在此处输入图像描述

所以我的代码是这样的，因为它<select><option><img href=""></option></select>不起作用。

<div class="input-group mb-3">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
      <div class="btn-group">
      <button type="button" class="no-border btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuReference" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <div class="dropdown-menu " aria-labelledby="dropdownMenuReference" style="position: absolute;transform: translate3d(-352px, 35px, 0px);min-width: 380px;overflow-x: hidden;" x-placement="bottom-start">
         @foreach($categories as $category)
        <a class="dropdown-item" href="#"><img class="rounded" src="/storage/category-icon/{{$category->business_icon}}">{{$category->business_name}}</a>
        @endforeach
      </div>
    </div>
</div>

对此的最佳做法是什么？（使用 bootstrap 4 和 laravel 顺便说一句）

标签： javascriptcssformsdrop-down-menudropdown

解决方案

由于使用本机HTML元素无法做到这一点，因此没有Javascript. 因此，您至少需要一个隐藏的输入字段 ( <input name="foo-bar-baz" type="hidden value="…" />) 来在服务器和客户端之间传输数据。数据可以是一个简单的序列化JSON对象，如下所示：

[
  {
    "label": "Click ME",
    "icon": "/img/icon.png",
    "value": "item-xxx"
  },
  …
]

从那里开始，您需要编写一些 Javascript 代码来生成看起来像<select>但不是的东西。该“虚拟字段”的每次更改都需要修改相应的隐藏值，以便在提交时将正确的值传输到服务器。

在这里我可以找到一个基于 的示例bootstrap，也许这会有所帮助。它呈现一个<ul><li></li>…&lt;/ul>列表以显示»虚拟字段«。

一种可能的解决方案可能在这里找到。

总而言之，您需要找到一个合适的 Javascript 库来帮助您完成它，或者自己编写一些代码来制作它。选择哪一个很大程度上取决于您的需求和要求。

这里要记住的另一件事是可访问性——如果用户禁用了 Javascript，或者使用有问题的浏览器来执行提供的代码，会发生什么。<select>那么渲染常规并使用数据属性注入图像可能是一个很好的起点，如下所示：

<select name="foo-bar-baz">
 <option value="value" data-icon="/path/to/icon">Label</option>
</select>

这会产生一个工作表单元素，然后可以用图标丰富它，以防 Javascript 正常工作。

所以回答这个问题：恕我直言，最佳实践是始终有效且不排除没有 Javascript、屏幕阅读器或基于文本的浏览器的用户的解决方案。所以上面提供的解决方案，从一个<select>应该逐渐增强的常规开始，就是我在这里所说的最佳实践。

推荐阅读