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

Question

I have two drop down list first for projects second for employees I need when select value from first drop down list(projects) then select value from second drop down list (employee) add new row of selected value from both two drop down list to table as following suppose i select one adil value selected removed from two drop down list both and inserted in table and when make remove from table added to drop down list my code as following 我有两个下拉列表，第一个用于项目，第二个用于员工，当我从第一个下拉列表（项目）中选择值，然后从第二个下拉列表（员工）中选择值时，我需要两个两个下拉列表中的新值添加行如下所示，假设我选择一个从两个下拉列表中删除的adil值，并且都插入到表中，并且当从表中添加make来添加到下拉列表中时，我的代码如下

@{
    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>

How i do that by jquery 我如何通过jQuery做到这一点

Answer 1

Firstly, since you want to perform the insertion right after selecting the project and employee, to make sure the change event occurs, let's add a dummy option in your two select s first: 首先，由于您要在选择项目和员工之后立即执行插入操作，因此为了确保发生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>

If you want to remove the row from table, maybe need another <td> to put the actions, so change the table to: 如果要从表中删除行，可能需要另一个<td>来放置操作，因此将表更改为：

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

Then create a JS function to do the insertion: 然后创建一个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>');
}

this function will fetch the selected value from your dropdown lists and create a new row in the table. 此函数将从下拉列表中获取选定的值，并在表中创建一个新行。 Next, bind the function to the change event of your select s: 接下来，将函数绑定到select的change事件：

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

Finally, when the remove button is click, find the project and employee from the same row, insert them back to the dropdowns, and remove the row from the table: 最后，单击“删除”按钮时，从同一行中找到项目和员工，将它们插入到下拉列表中，然后从表中删除该行：

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

The full demo can be found Here 完整的演示可以在这里找到

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

问题描述

1 个解决方案

解决方案1
0 2016-07-21 17:30:55

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

问题描述

1 个解决方案

解决方案1 0 2016-07-21 17:30:55

解决方案1
0 2016-07-21 17:30:55