jquery 属性选择器不适用于数据属性

Question

I know it could be duplicate of SO questions Selecting element by data attribute and jQuery how to find an element based on a data-attribute value?

But still I am not able to select all elements where an attribute "data-value" exist.

Issue: I am expecting statement B) $('[data-value]') or $('*[data-value]*') should return all elements which have data attribute "data-value", but it returns nothing.

However statement A) $('#openingBalAccount').data('value') getting result "ACC-2".

If statement A above works, then statement B should also work, but its not happening.

Below is the Chrome Dev Tool screen for the same, consider first 2 statements in screen as Statement A above, and rest as Statement B. As stated above if statement A works,statement B also should work.

Dev Tool example should be more than sufficient to identify any issue, but if you still insist for the code, here it is.

Jquery Statement to set data-value

$('#accountsModalSelect').on('click', function onAccountsModalSelect() {
    let rowData = $('#accountsModalSelect').data('selected')
    if (rowData) $('.accountSource').val(rowData.description).data('value', rowData.account)
    $('#accountsModal').modal('hide')
})

HTML Code in pug format

                    form#openingBalForm
                        input.form-control#openingBalUpdateType(type='hidden')
                        input.form-control#formtab(type='hidden' value='openingbaltab')
                        .row.form-group
                            .col-4
                                labal(for='openingBalFinYear') Financial Year
                            .col
                                input.form-control#openingBalFinYear(name='openingBalFinYear' type='text' )
                        .row.form-group
                            .col-4
                                labal(for='openingBalAccount') Account
                            .col
                                .input-group
                                    input.form-control.accountSource#openingBalAccount(name='openingBalAccount' type='text' )
                                    .input-group-append#openingBalAccountSearch
                                        .input-group-text
                                            .fas.fa-search
                        .row.form-group
                            .col-4
                                labal(for='openingBalAmount')  Amount
                            .col
                                input.form-control#openingBalAmount(name='openingBalAmount' type='number')

Answer 1

If you want to do something like this, you also have to add the html-attribute to the element. You can't access the internal stored data.

$('#accountsModalSelect').on('click', function onAccountsModalSelect() {
    let rowData = $('#accountsModalSelect').data('selected')
    if (rowData) {
        $('.accountSource')
            .val(rowData.description)
            .data('value', rowData.account)
            .attr('data-value', rowData.account) // Add this
    }
    $('#accountsModal').modal('hide')
})