javascript - 将选定的项目追加到列表中

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>