Question

我想使用javascript每当用户点击按钮时将文本输入中的内容添加到列表中。到目前为止，这是我的功能：

function add(){
    var form = document.getElementById('form')
    var email = form.elements.typer.value

    var select = document.getElementById('users')
    var option = document.createElement("option")
    option.text = email
    select.add(option)
}

它可以工作，但是您可以多次添加相同的文本。如何制作程序，使用户不能多次添加相同的文本？

Answer 1

您可以使用一个数组来跟踪所有已添加的电子邮件。然后，在创建select的选项之前，请检查是否在该数组中找到它（如果没有），然后添加（如果是），然后告诉用户。

请参见下面的代码

var addedUsers = [];

function add(){
    var form = document.getElementById('form')
    var emailInput = form.elements.typer;
    let email = emailInput.value
    emailInput.value = "";

    if (addedUsers.indexOf(email) == -1){
      addedUsers.push(email)
      var select = document.getElementById('users');
      var option = document.createElement("option");
      option.text = email;
      select.add(option)
    } else {
      alert("This user is already in the list");
      emailInput.focus()
    }
}

<form id="form">
  <input id="typer"/>
  <button onclick="add()" type="button">Add</button>
</form>

<select id="users"></select>

Answer 2

在添加文本之前，可以使用include（）检查列表中是否已存在该文本。 MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

这将返回true或false，具体取决于列表中是否已存在该值。

新增至清单

2 个答案: