html - 下拉选择每个选项值旁边的删除选项

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'd 的 javascript <option>很简单:

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

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

4a。服务器端 SESSIONS(以便为每个用户保存自定义设置)

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

4c。只是关于如何使用后端数据库(例如 MySQL/MariaDB)来存储用户自定义设置的基础知识。

4d。 AJAX - 这样您就可以将信息发送到后端以插入到数据库中，而无需刷新(或离开)当前页面。 AJAX 取代了古老且不再使用的 <form>构造。坦率地说，一旦您使用过几次 AJAX，您就再也回不去了。非常简单。

---

如果您处于困境中并且需要有人为您创建整个东西，我建议您引用 one of these websites - 我自己使用过此类服务，可以推荐。