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

时间：2019-06-11 17:42:34

标签： javascript jquery

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

在获取字段值以及将其设置为选定值方面，我很难。

这是我的代码：

[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>

example enter image description here

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

编辑：全局变量employee_list是一个数组，其中包含所有采用html选项格式的雇员。

1 个答案:

答案 0 :(得分：0)

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

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

将独特的类添加到特定的输入和选择也是一个好主意，而不是使用诸如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>

相关问题
最新问题