Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
​
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script>
​
    </script>
</head>
<body>
    <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>
    <table id="tb">
      <tr><td>ProjectName</td><td>EmployeeName</td><td>Action</td></tr>
    </table>
</body>
</html>
 
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').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();
});
​
Output 300px

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers