i have 2 drop down list first projects second employees need when select value first drop down list(projects) select value second drop down list (employee) add new row of selected value both 2 drop down list table following suppose select 1 adil value selected removed 2 drop down list both , inserted in table , when make remove table added drop down list code following
@{ 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 jquery
firstly, since want perform insertion right after selecting project , employee, make sure change event occurs, let's add dummy option in 2 selects first:
<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 want remove row table, maybe need <td> put actions, change table to:
<table id="tb"> <tr><td>projectname</td><td>employeename</td><td>action</td></tr> </table> then create js function insertion:
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 fetch selected value dropdown lists , create new row in table. next, bind function change event of selects:
$('select').on('change', function(e) { if (($('#myproject').val()) && ($('#myemployee').val())) { removeandadd(); } }); finally, when remove button click, find project , employee same row, insert them dropdowns, , remove row 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 found here
Comments
Post a Comment