从更改时的选择中检索值和数据属性

Retrieve value and data attribute from a select on change

本文关键字：检索 数据属性 选择      更新时间：2023-09-26

问题：一个html页面，多个选择输入：

  • 相同的6个选项
  • 同类
  • 具有不同值的名为"data productId"的数据属性

当用户更改其中一个选择输入的值时，我希望检索所选的值和属性值。

示例：

<select class="form-control tbl-sel-input" data-productId="some_value">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
        <option value="5">Option 5</option>
        <option value="6">Option 6</option>
</select>

当用户更改输入时。。。我需要新的值和数据productId。

我试了很多方法，但都没用
我不认为这是相关的，但这些选择输入在dataTable表中。

var selectInTbl = $("select.tbl-sel-input");
$(document).on('change', selectInTbl, function(){
            var attribute_value= $(this).data("productId");
            var input_value = $(this).val();
            alert(attribute_value + '- '+ input_value);
});

设置data属性的最佳做法是保持它们的小写，并根据需要用连字符分隔单词。这是由于jQuery在其内部缓存中序列化它们的方式，并且在从生成的缓存对象检索数据时，大写字母可能会导致不匹配。

还要注意，on()的委托形式将字符串作为其第二个参数，而不是jQuery对象。

考虑到这一点，试试这个：

$(document).on('change', "select.tbl-sel-input", function () {
    var attribute_value = $(this).data("product-id");
    var input_value = $(this).val();
    alert(attribute_value + ' - ' + input_value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control tbl-sel-input" data-product-id="some_value">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
</select>

相关文章：