Добавить выбранные элементы в список

Question

Я хочу создать выпадающий список с несколькими элементами. Как только пользователь выбирает товар и нажимает кнопку «+», товар добавляется ниже в раздел «корзина». Они должны иметь возможность добавлять несколько элементов снова и снова.

document.getElementById("button").onclick = function() {
  var a = document.getElementById("selection");
  var item = a.options[a.selectedIndex].text;

  document.getElementById("basket").innerHTML = item;
  var counter = 1;
  while (counter <= 1) {
    var list = document.write(item);
    counter++;
  }
}

<h1>Select your items!</h1>

<form id="myForm">
  <p>Item:
    <select id="selection">
      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
      <option value="4">four</option>
    </select>
    <button id="button">+</button></p>
</form>

<br><br><br>

<h1>Basket</h1>

<p id="basket"></p>

При нажатии кнопки все текущее содержимое исчезает, а выбранный элемент появляется сам по себе.

Answer 1

Кнопка в форме имеет нет type="button". Поэтому она используется как кнопка отправки, и поэтому вы получаете пустую страницу.

Вам не нужен цикл.

Пример

var button = document.getElementById("button");
var select = document.getElementById("select");
var basket = document.getElementById("basket");

// Add text
function addToBasket() {
  var li = document.createElement("li");
  li.innerHTML = select.options[select.selectedIndex].text;
  basket.appendChild(li);
}

button.addEventListener("click", addToBasket);

<h1>Select your items!</h1>

<form id="myForm">

  <p>Item:
    <select id="select">

      <option value="1">one</option>
      <option value="2">two</option>
      <option value="3">three</option>
      <option value="4">four</option>

    </select>

    <button id="button" type="button">+</button></p>

</form>

<h1>Basket</h1>

<ul id="basket"></ul>

Answer 2

Вы не объединяете их. document.getElementById("basket").innerHTML = item; удаляет все в корзине и добавляет только выбранный.

Используйте это, чтобы объединить новый элемент с тем, что уже существует в корзине document.getElementById("basket").innerHTML += item;. Вы можете сделать так, чтобы корзина выглядела красиво.