向下拉列表中添加和删除 - Adding and deleting to a dropdown

Adding and deleting to a dropdown

本文关键字：删除添加下拉列表 | 更新日期: 2023-09-27

在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);
}

我不知道它是否有助于下拉。有人能帮我决定哪种方法更好吗？我应该如何进行？

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

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

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

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

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

HTML:

<a id="add">Add More</a>

JavaScript:

var i = 1;
$("#add").click(function(){
                var appendFields = '<tr>';
                appendFields += '<td><select id="dropdown_'+i+'" name="dropdown_name[]"><option value="1">One</option></select></td>';
                appendFields += '<td><a style="color: red; cursor: pointer;" class="remCF">Remove</a></td>';
                appendFields += '</tr>';
                $("#table_id").append(appendFields);
                i++;
            });
            $("#table_id").on('click','.remCF',function(){
                $(this).parent().parent().remove();
            });
        });