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

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

0 голосов
/ 03 мая 2018

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

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

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

Ответы [ 2 ]

0 голосов
/ 03 мая 2018

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

$(".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>
0 голосов
/ 03 мая 2018

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

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