如何将两个下拉列表中的一行添加到表中，并在选择时删除

How to add one row from two drop down list to table and remove when select

本文关键字：删除 添加 选择 一行 两个 下拉列表      更新时间：2023-09-26

我有两个下拉列表项目第一员工第二我需要从第一个下拉列表（项目）中选择值，然后从第二个下拉列表中选择值（员工）将两个下拉列表中选定值的新行添加到表中，如下所示假设我选择一个adil从两个下拉列表中删除并插入表中的选定值以及当从添加到下拉列表的表中删除时我的代码如下

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script>
    </script>
</head>
<body>
    <div> 
        Project : <select id="myproject">
            <option value="1">one</option>
            <option value="2">two</option>
            <option value="3">three</option>
            <option value="4">four</option>
        </select><br />
        Employees : <select id="myemployee">
            <option value="1">ahmed</option>
            <option value="2">mohamed</option>
            <option value="3">saiad</option>
            <option value="4">adil</option>
        </select>
    </div>
    <table id="tb">
        <tr><td>ProjectName</td><td>EmployeeName</td></tr>
    </table>
</body>
</html>

我是如何通过jquery 来做到这一点的

首先，由于您希望在选择项目和员工后立即执行插入，为了确保change事件发生，让我们先在您的两个select中添加一个伪选项：

<div> 
    Project : <select id="myproject">
        <option value="">---select---</option>
        <option value="1">one</option>
        <option value="2">two</option>
        <option value="3">three</option>
        <option value="4">four</option>
    </select><br />
    Employees : <select id="myemployee">
        <option value="">---select---</option>
        <option value="1">ahmed</option>
        <option value="2">mohamed</option>
        <option value="3">saiad</option>
        <option value="4">adil</option>
    </select>
</div>

如果您想从表中删除该行，可能需要另一个<td>来执行操作，所以将表更改为：

<table id="tb">
    <tr><td>ProjectName</td><td>EmployeeName</td><td>Action</td></tr>
</table>

然后创建一个JS函数来进行插入：

function removeAndAdd() {
    var project = $('#myproject option:selected').detach();
    var employee = $('#myemployee option:selected').detach();
    var newproject = '<td class="td-project" data-value="' + project.val() + '">' + project.text() + '</td>';
    var newemployee = '<td class="td-employee" data-value="' + employee.val() + '">' + employee.text() + '</td><td><button class="btn-remove">Remove</button></td>';
    $('#tb').append('<tr>' + newproject + newemployee + '</tr>');
}

此函数将从下拉列表中获取选定的值，并在表中创建新行。接下来，将函数绑定到select s:的change事件

$('select').on('change', function(e) {
    if (($('#myproject').val()) && ($('#myemployee').val())) {
        removeAndAdd();
    }
});

最后，当单击删除按钮时，从同一行中找到项目和员工，将它们插入到下拉列表中，并从表中删除行：

$('#tb').on('click', '.btn-remove', function(e) {
    var row = $(this).closest('tr');
    var project = row.find('.td-project');
    var employee = row.find('.td-employee');
    $('#myproject').append('<option value="' + project.attr('data-value') + '">' + project.text() +'</option>');
    $('#myemployee').append('<option value="' + employee.attr('data-value') + '">' + employee.text() +'</option>');
    row.remove();
});

完整的演示可以在这里找到

相关文章：