Question

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

相同的6个选项
同一类
数据属性名为＆＃34; data-productId＆＃34;具有不同的值

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

示例：

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

当用户更改输入时...我需要新值和data-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>

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

1 个答案: