如何在名称属性 JQuery 中查找动态 ID

Question

I have many inputs where to dynamically change the value of the name attribute, for example:

Select

<select class="form__input form__select select optional" id="js-customer-field" name="customer[customer_food_attributes][16321232322354][customer_id]"><option value="">Select</option>

...

<select class="form__input form__select select optional" id="js-customer-field" name="customer[customer_food_attributes][023912321331123][customer_id]"><option value="">Select</option>

I would like to take the value to apply to an event, but since the id's are random I don't know how to capture them

on this name attribute or any with random id:

"customer[customer_food_attributes][023912321331123][customer_id]"

$("customer[customer_food_attributes][023912321331123][customer_id]").on('change'), function(e, item) {...})

I would be very grateful if someone could help me build the attribute dynamically Thank you for your time in reading me.

Answer 1

It is not really clear to what you are trying to do. Could you maybe clarefy a little bit? Are you trying to change the name attribute of the select elements? Or do you want to bind an event to all select elements?

If the latter, I would do something like this (assuming you want to trigger the event on a value change):

$(".form__select").on("change", function(){
    // Get the name attribute
    let name = $(this).attr("name");
    // Do whatever you like, depending on the value of name
    // ...
};

Answer 2

You could combine "attribute starts with" ( ^= ) and "attribute ends with" ( $= ) selectors to match something with an attribute that looks like:

customer[customer_food_attributes][...][customer_id]

Where ... is any text.

For example:

 $('[name^="customer[customer_food_attributes]["][name$="][customer_id]"]').on('change', function() { console.log(`Select ${$(this).attr('name').match(/\[(\d+)\]/)[1]} changed`) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="form__input form__select select optional" id="js-customer-field" name="customer[customer_food_attributes][16321232322354][customer_id]"> <option value="1" selected>1</option> <option value="2">2</option> </select> <select class="form__input form__select select optional" id="js-customer-field" name="customer[customer_food_attributes][023912321331123][customer_id]"> <option value="3">3</option> <option value="4" selected>4</option> </select>

Answer 3

You could just listen to change events from any select elements and check if the name matches the pattern.

This can be done with/without jQuery.

 // using jquery
$('select').on('change', function(e) {
    const regex = /customer\[customer_food_attributes\]\[(\d+)\]\[customer_id\]/;
    const match = e.target.name.match(regex);
    if(match){
        const id = match[1];
        // here is your id
        // do something with it
    }
});

// using vanilla js
document.addEventListener('change', function(e) {
    const regex = /customer\[customer_food_attributes\]\[(\d+)\]\[customer_id\]/;
    const match = e.target.name.match(regex);
    if(match){
        const id = match[1];
        // here is your id
        // do something with it
    }
});