Как получить динамический идентификатор из имени класса?

Question

Я создаю динамический ряд с помощью jquery. Теперь у каждой строки разные ID и общее имя класса. Как я могу получить другой идентификатор от того же имени класса?

https://imgur.com/a/JCEhSna

См. На картинке выше. Пока я выберу опцию, тогда мне понадобится имя ID.

Моя попытка:

HTML:

<tbody id="dynamic_row">
          <tr id="firstTR">

            <td>

              <select name="product_id[]" class="invoiceProducts">
                  @foreach($products as $product)
                    <option value="{{ $product->id }}">{{ $product->productName }}</option>
                  @endforeach
              </select>

            </td>
            <td>
              <input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
            </td>
            <td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
            <td><input type="number" class="form-control" name="itemQuantity[]"></td>

            <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>

          </tr>

        </tbody>

$('#add').click(function(){  
   i++;
   j=i;

   console.log("Inside: " + i);

   var html = '<tr id="row'+i+'" class="dynamic-added">';
   html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">@foreach($products as $product)<option value="{{ $product->id }}">{{ $product->productName }}</option>@endforeach</select></td>';
   html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
   html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';

   let tb = $("table.invoice-table").find("tbody");
   tb.append(html);
   tb.find('tr').last().trigger('select-added');
});  


$('body').on('change', '.invoiceProducts', function() {
  var idOfSelect = $('.invoiceProducts').attr('id');
  console.log("Select ID: " + idOfSelect);
});

Вывод:

Выберите ID: не определено

Answer 1

Вы можете найти идентификатор, используя this.closest('tr').id в событии изменения

var i =0;
$('#add').click(function(){  
   i++;
   j=i;
   console.log("Inside: " + i);
   var html = '<tr id="row'+i+'" class="dynamic-added">';
   html += '<td><select name="product_id[]" class="invoiceProducts" id="itemSelect'+i+'">@foreach($products as $product)<option value="1">1</option><option value="2">2</option>@endforeach</select></td>';
   html += '<td><input type="text" class="form-control" name="itemDescription[]" id="itemDescription'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemCost[]" id="itemCost'+i+'"></td>';
   html += '<td><input type="text" class="form-control" name="itemQuantity[]" id="itemQuantity'+i+'"></td>';
   html += '<td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>';

   let tb = $("table.invoice-table").find("tbody");
   tb.append(html);
   tb.find('tr').last().trigger('select-added');
});  


$('body').on('change', '.invoiceProducts', function() {

  var idOfSelect = this.closest('tr').id
  console.log("Select ID: " + idOfSelect);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="invoice-table">
  <tbody id="dynamic_row">
    <tr id="firstTR">
      <td>
        <select name="product_id[]" class="invoiceProducts">
           <option value="1">1</option>
           <option value="1">2</option>
           <option value="1">3</option>
           <option value="1">4</option>
        </select>
      </td>
      <td>
        <input type="text" class="form-control" name="itemDescription[]" id="itemDescription">
      </td>
      <td><input type="text" class="form-control" name="itemCost[]" id="itemCost"></td>
      <td><input type="number" class="form-control" name="itemQuantity[]"></td>
      <td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
    </tr>
  </tbody>
</table>

Answer 2

Я думаю, что это может помочь

$('body').on('change', '.invoiceProducts', function() {
  var idOfSelect = $(this).attr('id');
  console.log("Select ID: " + idOfSelect);
});

Хитрость заключается в выборе идентификатора измененного элемента, верно?

Answer 3

Вы должны попробовать с «документом». Это может вам помочь. Нравится:

$(document).on('change', '.invoiceProducts', function() {
  var idOfSelect = $(this).attr('id');
  console.log("Select ID: " + idOfSelect);
});

Answer 4

Если у вас есть элемент <select>, вы должны иметь элементы <option> также как дочерние элементы.

Просто установите атрибут "value" этих дочерних элементов.

<select id="mySelect">
  <option id="1" value="1"> A <option>
  <option id="2" value="2"> B <option>
  <option id="3" value="3"> C <option>
</select>

$("#mySelect").change(function(){
  var selectedOption = $(this). children("option:selected").val();
  console.log(selectedOption)
})