我在 textarea 中显示列表框的选定项目，但是当我修改 textarea 值时，它停止工作

Question

我有下一个代码来显示文本区域中列表框的 selected 选项：

$(".listBoxClass").change(function () {
        var str = "";
        $("#listBoxID option:selected").each(function () {
            str = $(this).text() + " \n";
        });
        $("#textAreaID").append(str);
    }).trigger("change");

它似乎有效，但如果我删除一个词，或在 textArea 中进行任何更改，代码将停止工作，因此如果我 select 列表框中的其他项目它不会出现在textArea...我需要允许用户修改 textArea 值的选项，这样他也可以手动输入值

Answer 1

您应该设置文本区域的值，而不是附加到它。而且您没有将它连接到字符串，而是在每次迭代中不断替换它。

$(".listBoxClass").change(function() {
  var str = "";
  $("#listBoxID option:selected").each(function() {
    str += $(this).text() + " \n"; //concat it, do not replace, note the +=
  });
  $("#textAreaID").val(str);  //replace tha value
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" class="listBoxClass" id="listBoxID">
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<textarea id="textAreaID"></textarea>

Answer 2

使用附加功能，您可以将内容插入到匹配元素集中每个元素的末尾。所以你不能使用这个函数来改变文本区域的值。只需使用以下脚本：

$(".listBoxClass").change(function() {
    $("#textAreaID").val( $( this ).val() )
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select multiple="multiple" class="listBoxClass" id="listBoxID">
    <option>One</option>
    <option>Two</option>
    <option>Three</option>
</select>
<textarea id="textAreaID"></textarea>

我在 textarea 中显示列表框的选定项目，但是当我修改 textarea 值时，它停止工作

I show the selected items of a listbox in a textarea, but when i modify the textarea value, it stops working

javascript

textarea

listbox

selecteditem

razor