如何创建一个接受多个逗号分隔的预先指定值的输入字段？答案

【问题标题】：How to create an input field that accepts multiple comma separated pre-specified values?如何创建一个接受多个逗号分隔的预先指定值的输入字段？
【发布时间】：2022-02-05 04:11:59
【问题描述】：

我想创建一个输入字段，单击该字段会创建一个可用值的下拉列表。之后，用户可以选择一个或多个值，这些值将被添加到字段中，以逗号分隔（就像我们在提问时添加 stackoverflow 标签一样）。我可以创建一个如下所示的下拉列表，但它一次只允许我选择一个值。

<div class="form-group">
  <select class="form-control" name="year">
    <option class="hidden" selected disabled>Please select your year</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</div>

【问题讨论】：

您可以将multiple 添加到选择打开标签<select multiple ...... 中查看此指南：developer.mozilla.org/en-US/docs/Web/HTML/Element/…
@Dale 在这种情况下，我必须按住 ctrl 才能一次选择多个值，我可以解决这个问题吗？

标签： html forms input

【解决方案1】：

您可以在 select 上侦听更改或单击事件，并根据单击的内容或当前选择的内容构建标记列表：

const s = document.querySelector('select');
const list = document.querySelector('ul');

s.addEventListener('change', e => {
  list.innerHTML = [...e.target.selectedOptions].map(({value}) => `<li>${value}</li>`).join('');
})

:root {
  font-family: sans-serif;
}

select {
  min-width: 80px;
  margin-bottom: 2rem;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

li {
  background: skyblue;
  color: aliceblue;
  border-radius: 4px;
  padding: 0.5em 1em;
  margin-right: 0.5em;
}

<select multiple>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>

<ul></ul>

【讨论】：