Доступ к атрибутам данных из динамически добавляемого выбора

Question

До сих пор я видел только примеры получения атрибута данных из опции выбора, которая уже есть на странице или добавлена ​​через несколько секунд.

Я смотрю на нажатие кнопки, добавление формы 3+ поля, в которых одно раскрывающееся поле с возможностью поиска содержит тег данных с другой информацией для использования. Возможно, я пойду неправильно.

Это сгенерированные параметры при выборе

while ($row = mysqli_fetch_array($result))
        {
            $part = mysqli_real_escape_string($link, $row['part_number']);
            $output .= "<option value=" .$row['id']. " data-sellprice=".$row['sell_price'].">" .$part. "</option>";
        }

Это Javscript, который создание полей.

 <script>
    $(document).ready(function(){
     
     $(document).on('click', '.add', function(){
      var html = '';
      html += '<tr>';
      
      html += '<td><select name="item_name[]" class="form-control fstdropdown-select item_name" id="swoparts"><option value="">Select Unit</option><?php echo fill_unit_select_box($db); ?></select></td>';
      html += '<td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td>';
      html += '<td><input type="text" name="item_price[]" class="form-control item_price" /></td>';
      html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
      $('#item_table').append(html);
      setFstDropdown();
     });
     
     $(document).on('click', '.remove', function(){
      $(this).closest('tr').remove();
     });
 
 $("#swoparts").on("change", "select[name='item_name[]']", function(){
  console.log(this.value);
  })
});
</script>

Я хотел бы получить цену продажи данных из этой опции и отобразить ее в текстовом поле item_price [] и использовать полученную сумму для добавления к другим суммам формы для итогов.

Я могу заставить атрибут данных работать с выбранным элементом, который уже находится на странице при загрузке.

ОТРЕДАКТИРОВАННАЯ ЧАСТЬ ЗДЕСЬ НУЖНА ПОМОЩЬ !!!!!!

Я зашел так далеко, пожалуйста, объясните, что я сделал и почему это не работает. Я могу заставить все это работать для избранного, созданного во время создания страницы или при загрузке документа. Я НЕ МОГУ сделать эту работу постфактум.

<table class="table table-bordered" id="item_table">
      <tr>
       <th>Enter Item Name</th>
       <th>Enter Quantity</th>
       <th>Item Price</th>
       <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
      </tr>
      <tr>
        <td>
            <select id="swoparts" class="swoparts">
                <option value="1" data-sellprice="55.00">Some thing we sell</option>
                <option value="2" data-sellprice="100.00">Something else we sell</option>
            </select>
        </td>
        <td><input type="text"></td>
        <td><input type="text"><td>
        </tr>
     </table>
$(document).ready(function(){
 $('select.swoparts').change(function() {
        var e = document.getElementById("swoparts");
        var strUser = e.options[e.selectedIndex].value 
        console.log(strUser);
    });
 $(document).on('click', '.add', function(){
    $("#item_table").last().append('<td><select id="swoparts" class="swoparts"><option value="1" data-sellprice="55.00">Some thing we sell</option><option value="2" data-sellprice="100.00">Something else we sell</option></select></td><td><input type="text" name="item_quantity[]" class="form-control item_quantity" /></td><td><input type="text" name="item_price[]" class="form-control item_price" id="sell_price" /></td><td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>');  
 });

ПОЧЕМУ я не могу получить информацию из динамически сгенерированного выбора?

Я хочу, чтобы в мою таблицу были добавлены 3 поля с раскрывающийся список, который заполняется из базы данных, где я могу взять атрибут набора данных, показать его в другом месте и добавить его вместе с другими атрибутами набора данных из других добавленных строк таблицы.

Answer 1

Я создал скрипт:

• Добавить поле выбора с опцией, в которой присутствует атрибут data- *.
• Затем при изменении значения этого поля выбора найдите выбранный вариант
• Получите данные вышеупомянутой опции - * attrbite и добавьте их.

https://jsfiddle.net/asutosh/k6jxmgs9/21/

Код JS ниже:

function addFields() {
  const form1 = document.querySelector('#testform')
  const selectField = document.createElement('select');
  let dataView = null;
  [1, 2, 3].forEach((aVal) => {
    let optionElem = document.createElement('option');

    optionElem.setAttribute("value", aVal);
    optionElem.setAttribute("data-sellprice", "sell-" + aVal);
    optionElem.text = aVal;
    selectField.appendChild(optionElem);

  })
  selectField.addEventListener('change', () => {


    form1.querySelectorAll('option').forEach((opt) => {

      if (opt.value === selectField.value) {

        dataView = opt.getAttribute("data-sellprice");
      }
    })
    document.querySelector('#selectdData').innerHTML = dataView;
  });

  form1.appendChild(selectField);