时间戳

首页 > 解决方案 > 来自动态添加的选择的数据属性访问

javascript - 来自动态添加的选择的数据属性访问

问题描述

到目前为止，我只看到从页面上已有的选择选项中获取数据属性的示例，或者几秒钟后添加的示例。

我正在查看单击一个按钮，添加 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>";
        }

这是创建字段的 JavaScript。

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

我想从选项中获取 data-sellprice 并将其显示在 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 个框添加到我的表中，并从数据库中填充一个下拉列表，我可以在其中获取数据集属性并将其显示在其他地方，并将其与其他添加的表行中的其他数据集属性一起添加。

标签： javascriptselectdynamicdropdowncustom-data-attribute

解决方案

我创建了一个小提琴：

  • 添加选择框，其中有 data-* 属性的选项。
  • 然后在更改这些选择框值时找到所选选项
  • 获取上述选项的 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);

推荐阅读