javascript - 添加和删​​除下拉列表

Question

在 HTML 表单中，我有一个复选框，例如 -

<select class="text" name="department" id="department">
    <option value="">Select department</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
 </select>

现在，我希望赋予用户在列表中添加或删除部门的能力。他/她可以添加分支 D 和 E，也可以删除分支 B。

我编写了一个 Javascript 函数来列出所有分支名称作为复选框以选择要删除的元素-

function deletefield() {
    var container = document.getElementById('drop_down');
    container.innerHTML="";
    for(i=0; i<passed_array.length; i++) {
        var check = document.createElement("INPUT");
        var br = document.createElement("BR");
        check.setAttribute("type","checkbox");
        check.setAttribute("value",passed_array[i]);
        var label = document.createElement('label');
        label.htmlFor = "id";
        label.appendChild(document.createTextNode(passed_array[i]));
        container.appendChild(check);   
        container.appendChild(label);
        container.appendChild(br);
    }
}

但我不知道如何继续删除所选分支。

在上网时我遇到了这段代码

function remove(id) {
    return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}

我不知道它是否对下拉菜单有帮助。有人可以帮助我决定哪种方法更好以及我应该如何继续吗？

Answer 1

您可以选择您要删除的特定选项。使用 jQuery 如下

var removeChild = function(branchToDelete) {
    $("option[value='"+branchToDelete+"']").remove();
}

要向下拉菜单添加新选项，您必须将新选项附加到下拉菜单

var addChild = function(newBranch) {
    $("#department").append("<option value='"+newBranch+"'>"+newBranch+"</option>");
}

另请参阅Select2Js Plugin 。它具有许多与下拉菜单相关的良好功能，可能对您有用