Question

我有一个添加用户和一个删除用户按钮。我的函数可以接受文本输入中的任何内容，然后将其添加到选择中或从中删除。这是我的js代码：

var addedUsers = [];

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

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

    emailInput.focus()
    if (addedUsers.indexOf(email) == -1){
        addedUsers.push(email)       
        select.add(option)
    } else {
        alert("This user is already one of your recipients!");
    }
}

function rem(){
    var form = document.getElementById('form')
    var emailInput = form.elements.typer
    let email = emailInput.value
    emailInput.value = ""

    var select = document.getElementById('users')
    var options = select.options

    emailInput.focus()
    if (addedUsers.indexOf(email) != -1){
        for (var i = 2; i < options.length; i++){
            if(email === options[i].innerHTML){
                select.remove(i)
                addedUsers.splice(email, 1)
                break
            }
        }
    } else {
        alert("This user is not already one of your recipients!")
    }
}






        <form id="form">
            <div class="recipients">
                <input type="text" class="typer" name="typer">
                <br><br>
                <button onclick="add()" type="button" class="ar">Add User</button>
                <button onclick="rem()" type="button" class="ur">Remove User</button>
                <br><br><br>
                <select id="users" name="users" class="userlist" size="24">
                    <option class="listhead">__________*Recipents*__________</option>
                    <option class="listhead">-------------------------------</option>
                </select>
            </div>   
            <div class="content">
                <button onclick="mail()" class="send">Send</button>
                <br><br>
                <textarea type:"content" name="content" class="typec" cols="113" rows="12"></textarea>
            </div>
        </form>

我注意到，在出现警报之前，我什么也不能添加，也无法删除。我该如何预防？另外，如果我在选择中打了一个添加的选项，如何使它显示在文本输入中？谢谢！

Answer 1

我会说您没有使用好的方法来添加和删除选择项。

您应使用appendChild将选项添加到选择中，并使用removeChild删除选择项。

示例：

// in the add() function
select.appendChild(option)

// in the rem() function
select.removeChild(options[i])

文档：

Answer 2

正如Chocolord正确指出的那样，您需要分别使用有效的方法，例如appendChild和removeChild，而不是add和remove。

您的程序错误地认为已正确添加用户的原因是，您实际上是在实际的DOM操作之前将他们添加到了数组中。

    addedUsers.push(email)       
    select.add(option)

分别。确保您将操作反转为

    select.add(option)
    addedUsers.push(email)

从列表中删除

2 个答案: