在用户提交表单之前，您如何检索选定的选项？答案

【问题标题】：How do you retrieve selected options BEFORE the user have submitted the form?在用户提交表单之前，您如何检索选定的选项？
【发布时间】：2021-09-16 03:16:53
【问题描述】：

我正在尝试获取在多选中选择的数据。但是，我想在表单的另一个字段中显示选定的选项。因此，我不想在获取数据并显示之前发送实际的表单。

我想主要使用该值从数据库中收集信息，为用户提供为该选择选项指定的数量！

我从不同的线程尝试了多种不同的解决方案，但不幸的是它们没有奏效！

选择我想从中收集所选选项的选项：

<div class="col-12">
  <label for="misstanke" class="form-label">Lagöverträdelser</label>
  <select multiple name="misstanke[]" onkeydown="return event.key != 'Enter';" class="form-select form-select-md">
    <?php
    include('selects/overtradelser.php');
    ?>
  </select>
</div>

我要在其中显示数据的输入字段：

<div class="mb-3">
  <label for="straff" class="form-label">Påföljder</label>
  <input type="text" onkeydown="return event.key != 'Enter';" class="form-control" name="straff" id="straff">
</div>

代码：

function Straff() {
    var select1 = document.getElementById("misstanke");
    var selected1 = [];
    for (var i = 0; i < select1.length; i++) {
        if (select1.options[i].selected) selected1.push(select1.options[i].value);
    }
    document.getElementById("straff").setAttribute('value', select1);
}

【问题讨论】：

这能回答你的问题吗？ Getting the selected values in a multiselect tag in Javascript
@luk2302 不幸的是，不管我做什么，它似乎都不起作用。
“不管我做什么，它似乎都不起作用” - 什么不起作用？在代码中向我们展示。您的问题需要更多详细信息，以便我们确定如何提供帮助。请添加minimal reproducible example。
@RandyCasburn 我目前正在尝试 luk2302 注释（javascript 部分）中显示的代码。我遇到的问题是，一旦我选择了一个选项，它就不会更新“straff”字段。链接到整个代码部分：srcb.in/tE2mv8P79m
在问题中发布代码，而不是在远程站点。

标签： javascript php html ajax

【解决方案1】：

要更新输入的值，请将其分配给其value 属性，而不是属性。

您应该使用join() 方法将数组转换为具有指定分隔符的字符串。

document.getElementById("straff").value = selected1.join(',');

【讨论】：

使用上面的代码时，字段中不会显示任何内容。当我使用document.getElementById("straff").value = select1; 时，我只得到：“[object HTMLSelectElement]”当我选择一个选项时。相信我需要在将其发送到输入字段之前将其转换为字符串？
抱歉，错字，应该是selected1。
谢谢，问题解决了。感谢所有帮助！