вставить в форму повторяющиеся элементы из выпадающего списка html

Есть список с опциями. Вопрос: как сделать выпадающий список "form" html с этими опциями, чтобы выбранный элемент сразу записывался в поле ввода "form", при этом должна оставаться возможность продолжать дальнейший выбор опций, в том числе и повторного ввода одной и той же опции. То есть если список состоит из [1, 2, 3, 4], то можно было бы записать в поле ввода [1, 2, 1, 1] после чего нажать на кнопку "рассчитать". На сколько я понимаю, атрибут "multiple" в select не подходит, так как не позволяет дублировать опции.


Ответы (1 шт):

Автор решения: Максим Степанов

Вот примерно такая должна быть форма по идее.

<select name="options">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select>
<input id="selected_options" />
<script>
window.addEventListener('load', function(){
  var target_input = document.getElementById('selected_options');
  var options = document.querySelector('[name="options"]');
  options.addEventListener('change', function() {
    target_input.value += (target_input.value) ? ', ' + options.value : options.value;
  });
});
</script>

→ Ссылка