每个选项值旁边的下拉菜单中选择删除选项

Question

我需要实现一个下拉列表，该下拉列表在每个选项项旁边都有一个删除“ X”选项。有点像下面显示的图像。 该下拉列表是动态填充的，我需要一种不使用列表作为替代的方法。

编辑：每个下拉菜单旁边的图标表示“编辑” /“删除”

Answer 1

您不能在通常的<select>或多选HTML元素中添加复选框。

但是，here is another question讨论了几个不错的选择。

这看起来是最有用且最适合您的目的的

https://stackoverflow.com/a/27547021/1447509

这是一个如何将默认选中标记更改为X的示例：

https://stackoverflow.com/a/40123793/1447509

来源：

How to use Checkbox inside Select Option

After selecting check box Instead of Tick symbol need X in html

更新：

鉴于您同时需要HTML标记和使其执行所需的JavaScript，您需要执行两个（可能是3个）步骤：

1. This answer提供了一个很好的示例，说明如何创建自定义滚动的<select>控件。

2. This answer向您展示如何用您选择的图标/图像替换在步骤1中创建的复选框。

3. 删除x <option>的JavaScript非常简单：

    $(this).closest('option').remove();

1. 如果您还需要保存这些结果，那么您还需要学习：

4a。服务器端会话（以便为每个用户的保存他们的自定义）

4b。一个登录系统，因此您知道要为哪个用户保存当前的自定义设置。

4c。只是有关如何使用后端数据库（例如MySQL / MariaDB）存储用户自定义内容的基础知识。

4d。 AJAX-因此，您可以将信息发送到后端以将其插入数据库中，而无需刷新（或离开当前页面）。 AJAX取代了古老且不再使用的<form>结构。坦白说，一旦使用过AJAX两次，就再也不会回头了。完全容易。

---

如果您处于困境中并且需要某人为您创建整个产品，我会向您推荐one of these websites-我自己使用了此类服务，并可以推荐它们。