从下拉列表中选择多个选项并将所选选项输入到输入字段答案

【问题标题】：Select Multiple Options from a dropdown list and input selected options to input field从下拉列表中选择多个选项并将所选选项输入到输入字段
【发布时间】：2020-11-26 18:54:09
【问题描述】：

我希望能够在下拉列表中进行多项选择，并将这些选择的输入写入带有 HTML、CSS 和 JS 的输入字段。我正在使用引导程序，这是我到目前为止所得到的，但还没有找到如何选择多个项目并将这些选择写入输入字段。我试过<select multiple>，但似乎没有用。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nestia Umbrella</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel="stylesheet" href="./app.css">
    <script src="https://kit.fontawesome.com/86fa3c1316.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="input-group">
        <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon" placeholder="Services Rendered">
            <option value="General Cleaning">General Cleaning</option>
            <option value="Change Battery">Change Battery</option>
            <option value="Re-align Spring">Re-align Spring</option>
            <option value="Replace Spring">Replace Spring</option>
            <option value="Replace Battery Cover Screw">Replace Battery Cover Screw</option>
        </select>
</div>
</body>
</html>

【问题讨论】：

<select multiple> 有效。您需要使用 ctrl 或 shift 键选择它们。
@zmag 我将其构建为移动优先网站，如何在移动设备上选择多个？
@TengBankWei 使用<select multiple>即可。移动浏览器会处理它。

标签： javascript html css bootstrap-4

【解决方案1】：

如果您想将选择写入输入，您将需要一个脚本。是否有引导程序，不会影响这一点。

你可以这样做：

var select = document.getElementById("inputGroupSelect04");
var input = document.getElementById("input");

select.addEventListener("change", function(event) {
  const selected = document.querySelectorAll('#inputGroupSelect04 option:checked');
  const values = Array.from(selected).map(el => el.value);
  
  input.value = values.join(', ');
})

我在这里创建了一个示例：https://codepen.io/bj-rn-nyborg/pen/WNGNwpV

【讨论】：