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

Question

问题:一个 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>

当用户更改输入时...我需要新值和数据产品 ID。

我已经尝试了很多东西，但没有任何效果。
我不认为这是相关的，但这些选择输入在 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);
});

Answer 1

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

另请注意，on() 的委托(delegate)形式将字符串作为其第二个参数，而不是 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>