Совместная работа textarea с select option

@Алекс_ · Регистрация: 16.03.2015

Студворк — интернет-сервис помощи студентам

Прошу помочь, сам новичок в языке java script, буду благодарен за помощь

есть форма, на ней 2 элемента, один из них textarea(текстовое поле), а в другой элемент select option, в textarea уже есть значение в value(любой текст), так вот, необходимо реализовать, чтобы при выборе select любого option, в textarea добавлялось значение уже к существующему value(значению) через точку с запятой, и так при каждом выборе select option добавлялось значение в текстовое поле(плюсовалось). Буду очень благодарен за помощь

на скриншоте примерно показано как должно быть
вот примерчик небольшой основного кода...

HTML5
1
2
3
4
5
6
7
8
<form>
  <textarea name="textar">текст</textarea>
  <select name="sel">
     <option>1</option>
     <option>2</option>
     <option>3</option>
  </select>
</form>

@vovandr · 11.05.2015, 22:22

HTML5
1
2
3
4
5
6
7
8
<form>
  <textarea id="textarea" name="textar">текст</textarea>
  <select id="select" name="sel">
     <option>1</option>
     <option>2</option>
     <option>3</option>
  </select>
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
(function(){
   var textarea = document.getElementById('textarea'),
       select = document.getElementById('select');
 
  // с повторами
  /*select.onchange = function() {
    textarea.value += ';' + this.value + ';';
  };*/
  
  //без повторов
   var selectValues = {};
   select.onchange = function() {
    if(!selectValues[this.value]){
       selectValues[this.value] = this.value;
       textarea.value += ';' + selectValues[this.value] + ';'; 
     }
  };
})();

@Алекс_ · 11.05.2015, 23:00 **[ТС]**

vovandr, спасибо большое))) но работает немножко некорректно
при добавлении несколько записей при помощи select, добавляются два двоеточия подряд, вот скрин:
http://cs625128.vk.me/v6251289... C5lpiM.jpg

Добавлено через 2 минуты
vovandr, разобрался, еще раз спасибо

Добавлено через 15 минут
vovandr, vovandr, еще один вопрос к этой теме)
вот когда выбираю значения через select, и они естественно появляются в textarea, а когда после добавления их очищаю в текстовом поле, и хочу повторно выбрать те же самые значения в select-е, то те же значения уже не подставляются в текстовое поле, только при перезагрузке страницы срабатывает
если можешь, помоги пжта)

@vovandr · 12.05.2015, 07:33

Попробуйте так (закрывающие кавычки сразу поставил в html чтобы лишней логики для удаления дублирования не писать):

HTML5
1
2
3
4
5
6
7
8
<form>
  <textarea id="textarea" name="textar">текст;</textarea>
  <select id="select" name="sel">
     <option>1</option>
     <option>2</option>
     <option>3</option>
  </select>
</form>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
(function(){
   var textarea = document.getElementById('textarea'),
       select = document.getElementById('select'),
       txtStartArr = textarea.value.split(';'),
       selectValues = {};
 
   select.onchange = function() {
    if(!selectValues[this.value]){
       selectValues[this.value] = this.value;
       textarea.value += selectValues[this.value] + ';',
       txtStartArr = textarea.value.split(';');
     }
  };
  
  textarea.onblur = function() {
    var txtArr = textarea.value.split(';'),
          len = txtStartArr.length;
    for(var i = 0; i < len; i++){
      if(txtStartArr[i] != txtArr[i]){
         delete selectValues[txtStartArr[i]];
      }
    }
    txtStartArr = textarea.value.split(';');
  };
})();

Добавлено через 49 секунд
Рабочий пример http://codepen.io/anon/pen/WvrWoN

@Алекс_ · 12.05.2015, 11:40 **[ТС]**

vovandr,спасибо, но опять немножко не так работает, после добавления и очищения, опять так же: выбираешь запись в select, а он не появляется
можно же так сделать, чтобы можно было повторно добавлять любую запись сколько угодно раз, может это и решение и есть...

@vovandr · 12.05.2015, 11:42

просто поправьте на функцию с повторами, которую первый раз я закомментил...

@Алекс_ · 12.05.2015, 11:53 **[ТС]**

vovandr, насчет: "можно же так сделать, чтобы можно было повторно добавлять любую запись сколько угодно раз, может это и решение и есть...", да, так и надо, по-другому не будет работать у меня тут, благодарю еще раз

Добавлено через 1 минуту
vovandr, хорошо, спасибо, сейчас посмотрю

Добавлено через 7 минут
vovandr,к сожалению не работает

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form>
  <textarea id="textarea" name="textar">текст</textarea>
  <select id="select" name="sel">
     <option>1</option>
     <option>2</option>
     <option>3</option>
  </select>
</form>
<script>
(function(){
   var textarea = document.getElementById('textarea'),
       select = document.getElementById('select');
 
  // с повторами
  select.onchange = function() {
    textarea.value += this.value + ';';
  };
  
})();
</script>

@vovandr · 12.05.2015, 11:56

http://codepen.io/anon/pen/gpPJVW

@Алекс_ · 12.05.2015, 12:05 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .

@Алекс_ 1 / 1 / 0 Регистрация: 16.03.2015 Сообщений: 79
	11.05.2015, 23:00 [ТС]
	vovandr, спасибо большое))) но работает немножко некорректно при добавлении несколько записей при помощи select, добавляются два двоеточия подряд, вот скрин: http://cs625128.vk.me/v6251289... C5lpiM.jpg Добавлено через 2 минуты vovandr, разобрался, еще раз спасибо Добавлено через 15 минут vovandr, vovandr, еще один вопрос к этой теме) вот когда выбираю значения через select, и они естественно появляются в textarea, а когда после добавления их очищаю в текстовом поле, и хочу повторно выбрать те же самые значения в select-е, то те же значения уже не подставляются в текстовое поле, только при перезагрузке страницы срабатывает если можешь, помоги пжта) 0

@Алекс_ 1 / 1 / 0 Регистрация: 16.03.2015 Сообщений: 79
	12.05.2015, 11:40 [ТС]
	vovandr,спасибо, но опять немножко не так работает, после добавления и очищения, опять так же: выбираешь запись в select, а он не появляется можно же так сделать, чтобы можно было повторно добавлять любую запись сколько угодно раз, может это и решение и есть... 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	12.05.2015, 11:42
	просто поправьте на функцию с повторами, которую первый раз я закомментил... 0

@vovandr 636 / 523 / 195 Регистрация: 19.08.2013 Сообщений: 1,400
	12.05.2015, 11:56
	http://codepen.io/anon/pen/gpPJVW 0

@Алекс_ 1 / 1 / 0 Регистрация: 16.03.2015 Сообщений: 79
	12.05.2015, 12:05 [ТС]
	vovandr, я в том смысле, что повторно не получается добавить одну и ту же запись, приходится другую запись добавлять, а потом ту, которую надо, вот попытался два раз подряд двойку добавить, но не полуилось 0