如何设置动态创建的选择框的选定值

Question

我有一个包含选择框的多个单元格的表。 我有的代码可以创建/删除相对于您单击“+/-”的条目的行。 我希望如果我按下“+”，那么我的程序将查看在上面的条目中选择的员工，并将其作为当前（或新）条目中的选定值。

我很难抓住该字段的值，并使其成为选定的值。

这是我的代码：

[JS]

 function createRow(id, emp = null) { var newrow = [ id, '<select class="browser-default custom-select">' + employee_list + '</select>', // Want to add 'emp' here as selected element '<select class="browser-default custom-select"></select>', '<div class="input-group"><input type="number" min="0" step="0.5" class="form-control"><div class="input-group-append"><span class="input-group-text">hours</span></div>', '<div class="input-group"><div class="input-group-prepend"><span class="input-group-text">$</span></div><input type="number" step="0.01" min="0" class="form-control"></div>', '<textarea class="form-control" maxlength="200"></textarea>', '<a class="addButton"><i class="fa fa-plus"></i></a>&nbsp;&nbsp;&nbsp;<a class="deleteButton"> <i class="fa fa-minus"></i></a>' ]; return '<tr><td>' + newrow.join('</td><td>') + '</td></tr>'; } function renumberRows() { $('table#budget tbody tr').each(function(index) { $(this).children('td:first').text(index + 1); }); } $('#add').click(function() { var lastvalue = 1 + parseInt($('table#budget tbody').children('tr:last').children('td:first').text()); $('table#budget tbody').append(createRow(lastvalue)); }); $('table#budget').on('click', '.addButton', function() { $(this).closest('tr').after(createRow(0)); console.log($(this).closest('tr').children('td:nth-child(2)').val()); // tring to get previous entries selected employee renumberRows(); }).on('click', '.deleteButton', function() { $(this).closest('tr').remove(); renumberRows(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="pure-table pure-table-horizontal" id="budget" style="width: 100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th>Row</th> <th>Employee</th> <th>Task</th> <th>Budget</th> <th>Expense</th> <th>Comments</th> <th><a id="add" style="float: right; color: #0000EE">Add Row <i class="fa fa-plus"></i></a></th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <select class="browser-default custom-select" id="emp" size="1"> <option disabled selected>Choose Employee</option> <?php for($i=0;$i<count($options_2);$i++){echo $options_2[$i];} ?> </select> </td> <td> <select class="browser-default custom-select" id="task" size="1"> <option disabled selected>Pick Employee</option> </select> </td> <td> <div class="input-group"> <input type="number" min="0" step="0.5" class="form-control"> <div class="input-group-append"> <span class="input-group-text">hours</span> </div> </td> <td> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="number" step="0.01" min="0" class="form-control"> </div> </td> <td><textarea class="form-control" maxlength="200"></textarea></td> <td><a class="addButton"><i class="fa fa-plus"></i></a>&nbsp;&nbsp;&nbsp; <a class="deleteButton"> <i class="fa fa-minus"></i></a> </td> </tr> <!-- This is our clonable table line --> </tbody> </table><br> 

例

预期的结果是在点击+时将上一个（或上面）条目的员工作为新行中的选定值。 或者在照片中，黑名单将显示Choose Employee所在的位置。

编辑：全局变量employee_list是一个包含html选项格式的所有employee_list的数组。

Answer 1

如果createRow()将HTML转换为DOM元素会更容易。 然后，您可以使用jQuery方法查找select并设置其值。

使用$(this).closest('tr').find('select:first').val()从您单击Add的行中获取员工。

将不同的类添加到特定输入并选择，而不是使用select:first类的select:first器也是一个好主意select:first在行中查找特定的select 。

 function createRow(id, emp = null) { var newrow = [ id, '<select class="browser-default custom-select">' + employee_list + '</select>', // Want to add 'emp' here as selected element '<select class="browser-default custom-select"></select>', '<div class="input-group"><input type="number" min="0" step="0.5" class="form-control"><div class="input-group-append"><span class="input-group-text">hours</span></div>', '<div class="input-group"><div class="input-group-prepend"><span class="input-group-text">$</span></div><input type="number" step="0.01" min="0" class="form-control"></div>', '<textarea class="form-control" maxlength="200"></textarea>', '<a class="addButton"><i class="fa fa-plus"></i></a>&nbsp;&nbsp;&nbsp;<a class="deleteButton"> <i class="fa fa-minus"></i></a>' ]; var elts = $('<tr><td>' + newrow.join('</td><td>') + '</td></tr>'); if (emp !== null) { elts.find("select:first").val(emp); } return elts; } function renumberRows() { $('table#budget tbody tr').each(function(index) { $(this).children('td:first').text(index + 1); }); } $('#add').click(function() { var lastvalue = 1 + parseInt($('table#budget tbody').children('tr:last').children('td:first').text()); $('table#budget tbody').append(createRow(lastvalue)); }); $('table#budget').on('click', '.addButton', function() { var prevemp = $(this).closest('tr').find('select:first').val(); $(this).closest('tr').after(createRow(0, prevemp)); console.log($(this).closest('tr').children('td:nth-child(2)').val()); // tring to get previous entries selected employee renumberRows(); }).on('click', '.deleteButton', function() { $(this).closest('tr').remove(); renumberRows(); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="pure-table pure-table-horizontal" id="budget" style="width: 100%" cellpadding="0" cellspacing="0"> <thead> <tr> <th>Row</th> <th>Employee</th> <th>Task</th> <th>Budget</th> <th>Expense</th> <th>Comments</th> <th><a id="add" style="float: right; color: #0000EE">Add Row <i class="fa fa-plus"></i></a></th> </tr> </thead> <tbody> <tr> <td>1</td> <td> <select class="browser-default custom-select" id="emp" size="1"> <option disabled selected>Choose Employee</option> <?php for($i=0;$i<count($options_2);$i++){echo $options_2[$i];} ?> </select> </td> <td> <select class="browser-default custom-select" id="task" size="1"> <option disabled selected>Pick Employee</option> </select> </td> <td> <div class="input-group"> <input type="number" min="0" step="0.5" class="form-control"> <div class="input-group-append"> <span class="input-group-text">hours</span> </div> </td> <td> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text">$</span> </div> <input type="number" step="0.01" min="0" class="form-control"> </div> </td> <td><textarea class="form-control" maxlength="200"></textarea></td> <td><a class="addButton"><i class="fa fa-plus"></i></a>&nbsp;&nbsp;&nbsp; <a class="deleteButton"> <i class="fa fa-minus"></i></a> </td> </tr> <!-- This is our clonable table line --> </tbody> </table><br>