嘗試使用下拉列表文本更改時，更改文本區域中的文本后沒有更改？

Question

我有三個多選下拉列表，從這些下拉列表中選擇后，用戶按下提交按鈕，列表文本顯示在 textarea 中，但如果用戶更改 textarea 中的一些文本，然后再次 select 下拉列表中的另一個列表，然后按提交文本是在 textarea 中沒有變化。 我嘗試了一些解決方案，例如那個人說的使用$("#total_selections").val(""); 而不是$("#total_selections").html(""); 但在此之后，textarea 中沒有顯示任何內容。

<div class="form-group">
  <button type="button" class="btn btn-primary" id="selection_button" disabled>Select Tags</button>
 </div>
@Html.TextAreaFor(m => m.Formula, new { @class = "form-control", id = "total_selections" })

$("#selection_button").click(function () {
            $("#tag_creation").prop('disabled', false);
            $("#total_selections").val("");
            SelectedItemArray();
        });
    });


    function SelectedItemArray() {
        var datas = new Array();
        var datas = $('.add_item option:selected').map(function ()
        {
            return $(this).text() || undefined;
            }).get();
        $.ajax({
            url: "@Url.Action("selectedTags","CalculatedTags")",
            type: 'Post',
            contentType: 'application/json',
            dataType: 'json',
            data: JSON.stringify({ 'selectedTags': datas }),
            success: function (data) {
                $("#total_selections").append(data);
            }
        });
    }

Answer 1

 $("#selection_button").click(function () { var sel = $('#add_item option:selected').val(); const ele= `<p style = "display:inline; background-color: #e9ebee; color: black; margin: 2px; padding: 1px;"> ${sel} <span style="cursor: pointer" onclick= "this.parentElement.remove()"> x</span> </p>`; $("#total_selections").append(ele); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="add_item"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <button type="button" id="selection_button" >Select Tags</button> <div contenteditable="false" style="min-height:50px; border:1px solid black; width:300px;" id="total_selections"></div>

append function 更改了 DOM，這不是您在此處嘗試執行的操作（這會破壞 textarea 元素的默認行為）。