Я показываю выбранные элементы списка в текстовой области, но когда я изменяю значение текстовой области, он перестает работать

Question

У меня есть следующий код, чтобы показать выбранные параметры списка в текстовой области:

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

И это работает, но если я удалю слово или внесу какие-либо изменения в textArea, код перестанет работать, поэтому, если я выберу другой элемент в listBox, он не появится в textArea... Мне нужно разрешить опция для пользователя, чтобы изменить значение textArea, чтобы он мог также поставить значения вручную

Answer 1

С помощью функции добавления вы можете вставить содержимое в конец каждого элемента в наборе соответствующих элементов. Таким образом, вы не можете использовать эту функцию для изменения значения текстовой области. Просто используйте следующий скрипт:

$(".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>

Answer 2

Вы должны установить значение текстовой области, не добавляя к ней. И вы не заключаете это в строку, вы продолжаете заменять его на каждой итерации.

$(".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>