Select2 Picker 没有获得价值

Question

Table img

我有第一行（Emp Id 列 select2）class selectpicker2 所以我初始化它并在更改它时获取值

$('.selectpicker2').select2().on('open', function(e) {
  this.results.clear();
  this.dropdown._positionDropdown();
}).on('change', function(e) {
  var tr = $(this).parents('tr');
  var data = tr.find($(".selectpicker2 option:selected")).text();
  console.log(data);
});

第一行完全没问题，但是当我添加第二行、第三行等等时关于从未执行过的更改，我检查了它的 class 是否也存在

$('#addmore').on('click', function() {
  $('#sitebody').append(clonedtr);
  $('#sitebody > tr:last .selectpicker2').select2().on('open', function(e) {
    this.results.clear();
    this.dropdown._positionDropdown();
  });
});

这是克隆行

var clonedtr = '<tr>' +
  '<td><a class="btn btn-danger delrow"><i class="fa fa-times"></i></a></td>' +
  '<td>' +
  '<select name="emp_id[]" class="form-control selectpicker2" title="Select Employee"  data-live-search="true" required>' +
  <?php foreach($employee as $row): ?>
'<option value="<?= $row['
user_id ']?>"><?= $row['
user_id '].' - '.$row['
user_full_name ']; ?></option>' +
  <?php endforeach; ?>
'</select>' +
'</td>' +
'<td><input type="text" class="cal form-control" name="salary[]" placeholder="Basic Pay" value="12000"></td>' +
'<td><input type="text" class="cal form-control" name="work_days[]" placeholder="Enter No of Days" value="0" required></td>' +
'<td><input type="text" class="cal form-control" name="ot_days[]" placeholder="Enter No of Days" value="0" required></td>' +

'<td><input type="text" class="cal form-control" name="basic_pay[]" placeholder="Basic Pay" value="5000"></td>' +
'<td><input type="text" class="cal form-control" name="actual_pay[]" placeholder="Actual Pay" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="da[]" placeholder="Enter DA" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="hra[]" value="0" placeholder="Enter HRA"></td>' +
'<td><input type="text" class=" cal form-control" name="wa[]" value="500" placeholder="Washing Allowance"></td>' +
'<td><input type="text" class=" cal form-control" name="tpt[]" value="500" placeholder="Enter TPT"></td>' +
'<td><input type="text" class=" cal form-control" name="lwf[]" value="6" placeholder="Enter LWF"></td>' +
'<td><input type="text" class=" cal form-control" name="pf[]" placeholder="PF" value="0"></td>' +
'<td><input type="text" class=" cal form-control" name="esi[]" placeholder="ESI" value="0"></td>' +
'<td><input type="text" class=" cal form-control" name="bonus[]" placeholder="Bonus" value="0"></td>' +
'<td><input type="text" class=" cal form-control" name="leave_allowance[]" value="0" placeholder="Leave with Allowance"></td>' +
'<td><input type="text" class="cal form-control" name="other_allowance[]" placeholder="Other Allowance" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="g_salary[]" placeholder="Gross Salary" value="0"></td>' +
'<td><input type="text" class=" cal form-control" name="pf2[]" placeholder="PF" value="0"></td>' +
'<td><input type="text" class=" cal form-control" name="esi2[]" placeholder="ESI" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="p_tax[]" placeholder="PT" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="advance[]" placeholder="Advance" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="dress[]" placeholder="Dress" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="police_verification[]" placeholder="PVC" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="other_deduction[]" placeholder="Other Deduction" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="net_salary[]" placeholder="Net Salary" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="ot_salary[]" placeholder="OT Salary" value="0"></td>' +
'<td><input type="text" class="cal form-control" name="total_pay[]" placeholder="Total Pay" value="0"></td>' +
'</tr>';

Answer 1

由于您将创建更多 <tr>，请为其分配一个 class，以便您在附加后轻松将其初始化为 select2。

var clonedtr = '<tr class="for_select2">' +

$('#addmore').on('click', function() {
  $('#sitebody').append(clonedtr);
  $('.for_select2').select2().on('open', function(e) {
    this.results.clear();
    this.dropdown._positionDropdown();
  });
});

Answer 2

我明白了，我必须在行克隆/添加新行时添加 onChange，就像这样

$('#addmore').on('click', function(){
            $('#sitebody').append(clonedtr);
            $('#sitebody > tr:last .selectpicker2').select2().on('open', function (e) {
            this.results.clear();
            this.dropdown._positionDropdown();
         }).on('change', function(e) {
            var tr = $(this).parents('tr');
            var data = tr.find($(".selectpicker2 option:selected")).text();
            console.log("Inside selectpicker2");
            console.log(data);
      });

Select2 Picker 没有获得价值

Select2 Picker not getting value

javascript

jquery

jquery-select2