检索从选择上的变化值和数据属性

Question

问题： 一个HTML网页，与多个选择输入：

• 相同6个选项
• 称为“数据的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); 
}); 

Answer 1

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