Совместная работа 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, я в том смысле, что повторно не получается добавить одну и ту же запись, приходится другую запись добавлять, а потом ту, которую надо, вот попытался два раз подряд двойку добавить, но не полуилось

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .

@Алекс_ 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