时间戳

首页 > 解决方案 > html选择标签+选项

html - html选择标签+选项

问题描述

如何使用用户可以添加的其他选项来升级我的选择标签？FE：

<select id = "sport">
    <option value = "football"> football </option>
    <option value = "volleyball"> volleyball </option>
    <option value = "rugby"> rugby</option>
</select>

我需要一个额外的文本输入，用户可以在其中向选择标签添加新选项，如果用户编写另一种类型的运动，我希望在我的选择标签中将该运动永久作为选项。

问候，

标签： html

解决方案

看看 Select2 库和“动态选项创建”

<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link
  href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"
  rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="form-control js-example-tags">
  <option selected="selected">orange</option>
  <option>white</option>
  <option>purple</option>
</select>

<script>
  $(".js-example-tags").select2({
    tags: true,
  });
</script>

希望这可以帮助 ：）

推荐阅读