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

Question

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

 <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>

Answer 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>

Answer 2

您可以使用 select2 a jquery function

<select class="multiple_state" name="state" multiple>
<option value="0">Rajasthan</option>
<option value="1">Gujarat</option>
</select>

和 JQuery 代码是

$(document).ready(function() {
$('.multiple_state').select2();
});

使用这个 CDN

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
 
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>

在你的头上