Как зменить текст в textarea?

Question

[Алекс Иванов]

Имеется текстовое поле

<textarea id="CartNote" name="note" style="width:100%; height:100px; background:#fff; margin:20px 0; padding:10px;" ></textarea>

И несколько выпадающих списков формата:

<select class="selectcolor_<?=s;?>" id="selectcolor_<?=s;?>">           
..... выборка из базы ......
<option value="<?=color;?>:<?=title;?>"><?=title;?></option>
.....                 
</select>

Для каждого поля есть свой код обработки

<script type="text/javascript"> 
        $('#selectcolor_<?=s;?>').change(function(){
              var First = $("#CartNote").html();
                    
        let arr = First.split('; ');
        
        arr = arr.filter(Boolean);            
                   
        let keyArray = $(this).val().split(':');             
       console.log(arr.length);              
for (let i = 0; i < arr.length; i++) {
    
  if (arr[i].indexOf(keyArray[0]) > -1) {
    arr.splice(i);
  
  }

}
 $("#CartNote").html(arr.toString("; ")+$(this).val()+"; ");  
       });
</script>

Этот код добавляет строку к текстовому полю при смене выбранного пункта списка:

Красный:Стол; Зеленый:Стул; Красная:Простыня;

Но если потом снова сменить цвет стола то будет:

Желтый:Стол;

В чем ошибка? по идее ведь должно было быть

Зеленый:Стул; Красная:Простыня; Желтый:Стол;

Comments

[Сергей Сергей]

Я так понял, что селекты соответствуют предметам, а их значения цвета. Тогда, может, лучше собрать значения селектов в объект с ключами-предметами и значениями-цветами, а потом через фильтрацию и сериализацию?

Answer 1

[Semantic.Moscow]

через innerHTML читать содержимое узла textarea в переменную, собирать из текста массив с объектами (разделители у вас есть)
изменять в массиве нужный объект и перезаписывать содержимое узла.

Comments

[Semantic.Moscow]

всё смешалось, люди кони, объекты, массивы :D
ну вы меня поняли, да?

[Алекс Иванов]

Semantic.Moscow, да, в массив я разбил содержимое, проблема в поиске элемента который надо удалить :D. вероятно надо искать вхождение в єлемент ключевого слова.

[Semantic.Moscow]

Алекс Иванов, у вас же есть ключ и есть значение через двоеточие.
можно через метод find найти нужный ключ

[Алекс Иванов]

Semantic.Moscow, да, в массив я разбил содержимое, проблема в поиске элемента который надо удалить :D

var First = $("#CartNote").html();
                    
        let arr = First.split('; ');
   
        let keyArray = $(this).val().split(':');
    
for (let i = 0; i < arr.length; i++) {
  
  if ( match(arr[i], keyArray[0]) ) { 
  		 arr.splice(myIndex, 1);
  }
  
}

[Алекс Иванов]

Semantic.Moscow, но получаю ошибку Uncaught ReferenceError: match is not defined

[Semantic.Moscow]

Алекс Иванов, главное не забыть выдернуть пробелы из строки,
через регулярку: var rg= /\s*;\s*/;

[Алекс Иванов]

Вы могли бы сказать где проблема?

var First = $("#CartNote").html();
                    
        let arr = First.split('; ');
        
        let keyArray = $(this).val().split(':');             
         
for (let i = 0; i < arr.length; i++) {
    
  if (arr[i].indexOf(keyArray[0]) > -1) {
    arr.splice(i);
  }

}
    $("#CartNote").html(arr.toString()+$(this).val()+"; ");

если добавляю один стол, один стул то все классно но если еще раз выбираю стол и и стлу то затирает все содержимое.