Javascript 从下拉列表中选择多个选项，并将所选选项输入到输入字段_Javascript_Html_Css_Bootstrap 4

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

javascript html css bootstrap-4

Javascript 从下拉列表中选择多个选项，并将所选选项输入到输入字段,javascript,html,css,bootstrap-4,Javascript,Html,Css,Bootstrap 4,我希望能够在下拉列表中进行多项选择，并将这些选择的输入用HTML、CSS和JS写入输入字段。我正在使用bootstrap，这是我目前得到的结果，但是还没有找到如何选择多个项目，并将这些选择写入输入字段。我试过，但似乎不起作用 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na

我希望能够在下拉列表中进行多项选择，并将这些选择的输入用HTML、CSS和JS写入输入字段。我正在使用bootstrap，这是我目前得到的结果，但是还没有找到如何选择多个项目，并将这些选择写入输入字段。我试过

，但似乎不起作用

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>


雀巢伞
一般清洁
更换电池
重新对齐弹簧
更换弹簧
更换电池盖螺钉

如果要将选择写入输入，则需要脚本。无论是否有引导，都不会影响这一点

你可以这样做：

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(', ');
})

我在这里创建了一个示例：

有效。你需要用ctrl或shift键来选择它们。@zmag我正在构建一个移动第一站点，如何在移动设备上选择多个？@Tenbankwi只需使用

。移动浏览器将处理它。