How to select variant of the same ID/Class

Hi folkd! Hi have a HTML in JS structure wich class ID change depend on what select in the Select/Input/Option fiel in a form. Only change a number.
TL;DR
The only way to style this form is using this horrendous CSS structure:

select#order-product_1_flavor_1.require,
select#order-product_1_flavor_2.require,
select#order-product_1_flavor_3.require,
select#order-product_1_flavor_4.require,
select#order-product_1_flavor_5.require,
select#order-product_2_flavor_6.require,

select#order-product_2_flavor_1.require,
select#order-product_2_flavor_2.require,
select#order-product_2_flavor_3.require,
select#order-product_2_flavor_4.require,
select#order-product_2_flavor_5.require,
select#order-product_2_flavor_6.require,

select#order-product_3_flavor_1.require,
select#order-product_3_flavor_2.require,
select#order-product_3_flavor_3.require,

AND SO ON...

Can you se the point of this issue?
Its very problematic style all this variations.
There is a more elegant way to do it?

HTML in JS:

                $('#div-flavors_' + productIdentifier).append('<div style="text-align:center;">Debe elegir hasta ' + flavorAmount + ' sabores<span class="text-danger">*</span></div>'+
                                                                '<div id="' + productIdentifier + '_div-flavor' + flavorNumber + '">'+
                                                                    '<div class="form-row" style="padding:15px 0; margin-bottom: 10px;">'+
                                                                        '<div class="col-6 col-sm-6 col-md-6">'+
                                                                            '<label for="' + flavorIdentifier + '">Sabor ' + numberOfFlavor + '<span class="text-danger">*</span></label>'+
                                                                            '<select onchange=SetFlavorInProduct(' + JSON.stringify(productIdentifier) + ',' + JSON.stringify(flavorIdentifier) + '); style="width: 148px;" class=" require" id="' + flavorIdentifier + '">'+
                                                                            '</select>'+
                                                                        '</div>'+
                                                                        '<div class="col-4 col-sm-4 col-md-4 col-xl-4 cantFlavor">'+
                                                                            '<label for="cant_' + flavorIdentifier + '">Cantidad</label>'+
                                                                            '<select onchange=AddFlavorQuantity(' + JSON.stringify(flavorIdentifier) + '); class=" autocomplete" id="cant_' + flavorIdentifier + '"></select>'+
                                                                        '</div>'+
                                                                    '</div>'+
                                                                '</div>')

Not entirely sure i understand the question, but if it’s about the selector, plain javascript using css selectors has a useful pattern: attr^=value. We can select any html attribute that starts with a matching pattern, like this:

const myElements = document.querySelectorAll("[id^='order_product_']");

If you’re looking for a better way of handling the entire data structuring, you’d be better off providing a link to your complete code, whether in a github repo or codepen or repl or something.

Not sure I understand why you would need those selectors. Are you styling a select element based on what option element is selected?

1 Like

Yes! something like that.
This works amazing.
select[id^=“order-product_”][id*="_flavor"][class*=“require”]

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.