如何从两个下拉列表中添加一行到表中并在选择时删除答案

【问题标题】：How to add one row from two drop down list to table and remove when select如何从两个下拉列表中添加一行到表中并在选择时删除
【发布时间】：2016-11-25 06:11:50
【问题描述】：

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

@{
    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 做到这一点

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

首先，由于您想在选择项目和员工后立即执行插入，以确保发生change 事件，让我们首先在您的两个selects 中添加一个虚拟选项：

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

此函数将从您的下拉列表中获取所选值并在表中创建一个新行。接下来，将该函数绑定到您的selects 的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();
});

完整的演示可以在Here找到

【讨论】：