Question

我用数组填充SELECT。该数组包含带有employee-names的字符串。

我希望能够在数组中添加新的员工姓名，然后更新SELECT。我做了这个，但是当我调用这个函数时，我一直在重复。我有点理解为什么，但我还没有弄清楚如何使这个代码更好，所以我只添加了一个写在文本输入中的员工姓名。

我不想要一个删除所有重复项的功能，因为我认为应该可以让几个员工使用名称＆＃34; John＆＃34;。

我的HTML：

<section id="sidebar">
    <form onSubmit="return false">
        <label for="Name">Name:</label>
        <input id="nameInput" type="text" value="Your name here..." name="name" />
        <input type="submit" value="Add to list" name="Add" onClick="addToArray();"><br>
        <label for="Default">List over employees:</label>
        <select id="employeeSelect">
        </select>
    </form>
</section>

我的JS：

var employeeList = ['Sarah', 'Louse', 'Dan', 'John', 'Peter'];

function listEmployees(){
    var select = document.getElementById('employeeSelect');

    for (var i = 0; i < employeeList.length; i++)
    {
        var option = employeeList[i];
        var newOption = document.createElement("option");
        newOption.textContent = option;
        newOption.value = option;
        select.appendChild(newOption);
    }
}

listEmployees();

function addToArray(){
    var txtbox = document.getElementById('nameInput');
    var value = txtbox.value;

    employeeList.push(value);
    listEmployees();
}

Answer 1

每次添加新名称时，您都会调用columns = {'contact name': 1, 'name': 3, 'telephone' : 6, 'email': 7, 'mobile':8, 'feedback average': 2}（在列表中添加并重新添加所有）。

我将add-a-new - listEmployees()代码移出到自己的函数中。为原始列表中的每个名称调用它，然后在添加新名称时再次调用它。

option

var employeeList = ['Sarah', 'Louse', 'Dan', 'John', 'Peter'];

function addEmployee(name) {
  var select = document.getElementById('employeeSelect');

  var newOption = document.createElement("option");
  newOption.textContent = name;
  newOption.value = name;
  select.appendChild(newOption);
}

function listEmployees() {
  for (var i = 0; i < employeeList.length; i++) {
    addEmployee(employeeList[i])
  }
}

listEmployees();

function addToArray() {
  var txtbox = document.getElementById('nameInput');
  var value = txtbox.value;

  employeeList.push(value);   // update the list
  addEmployee(value);         // update the select
}

JS：推送到数组并更新选择而不会出现重复

1 个答案: