时间戳

首页 > 解决方案 > 从列表中删除

javascript - 从列表中删除

问题描述

我有一个添加用户和一个删除用户按钮。我有一些函数可以接受文本输入中的任何内容并从选择中添加或删除它。这是我的 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>

我注意到在警报出现之前，我什么也不能添加，也不能删除。我怎样才能防止这种情况？另外，如果我在选择中点击了添加的选项之一，如何让它显示在文本输入中？谢谢！

标签： javascripthtml

解决方案

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

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

例子：

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

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

文档：

推荐阅读