Javascript，多选复制到textarea

Question

我想将多选选项复制到文本区域。我编写了代码，直到我更改 textarea 框中的值（例如，当我添加一些内容时），它一直运行良好。在向 textarea 添加额外字符后，JS 复制功能不起作用。为什么？这是代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<form class="form multiple-select-form form-move">
    <div class="row">
        <div class="col-1-2">Multiselect:<br/>
            <select id="source_select" multiple="multiple" style="width: 500px; height:200px">
                <option value="option 1"> option 1 </option>
                <option value="option 2"> option 2 </option>
                <option value="option 3"> option 3 </option>
                <option value="option 4"> option 4 </option>
                <option value="option 5"> option 5 </option>
            </select>
        </div>
        <div class="col-1-2"><br/><br/>Textarea:<br/>
            <textarea name="text_to_db" id="target_textarea"  style="width: 500px; height:200px"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-1-1"><br/>
            <button type="button" onclick="myFunction()">Copy multiselect to textarea</button>
        </div>
    </div>
</form>

<script>
function myFunction() {
            if (document.getElementById("source_select").length > 0) {
                for (let i=0; i < document.getElementById("source_select").length; i++){
                    const option = document.getElementById("source_select").options[i];
                    const value = option.value;
                    if (option.selected) {
                        let nowy_tekst = document.getElementById("target_textarea").innerHTML + value + ", ";
                        document.getElementById("target_textarea").innerHTML = nowy_tekst;
                       // option.remove();
                    }
                }
            }
}
</script>
</body>
</html>

Answer 1

您应该使用 .value 而不是 .innerHTML，因为 textarea 是一个表单元素。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>

<form class="form multiple-select-form form-move">
    <div class="row">
        <div class="col-1-2">Multiselect:<br/>
            <select id="source_select" multiple="multiple" style="width: 500px; height:200px">
                <option value="option 1"> option 1 </option>
                <option value="option 2"> option 2 </option>
                <option value="option 3"> option 3 </option>
                <option value="option 4"> option 4 </option>
                <option value="option 5"> option 5 </option>
            </select>
        </div>
        <div class="col-1-2"><br/><br/>Textarea:<br/>
            <textarea name="text_to_db" id="target_textarea"  style="width: 500px; height:200px"></textarea>
        </div>
    </div>
    <div class="row">
        <div class="col-1-1"><br/>
            <button type="button" onclick="myFunction()">Copy multiselect to textarea</button>
        </div>
    </div>
</form>

<script>
function myFunction() {
            if (document.getElementById("source_select").length > 0) {
                for (let i=0; i < document.getElementById("source_select").length; i++){
                    const option = document.getElementById("source_select").options[i];
                    const value = option.value;
                    if (option.selected) {
                        let nowy_tekst = document.getElementById("target_textarea").value + value + ", ";
                        document.getElementById("target_textarea").value = nowy_tekst;
                       // option.remove();
                    }
                }
            }
}
</script>
</body>
</html>

Javascript，多选复制到textarea

Javascript, Multiselect copy to textarea

html

javascript

textarea

copy