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"。因此，它用作提交按钮，这就是为什么您获得 the 空白页的原因。

您不需要循环。

示例

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;中已经存在的项目连接起来。您可以对其进行样式设置，使篮子看起来不错。

将所选项目附加到列表

2 个答案:

示例