Ecommerce Shopify WordPress Discussion

jQuery: Hide duplicate options based on data attributes

I'm trying to use jQuery to hide duplicate <option> elements within a <select> based on a specific data attribute. The options have data-addon-name and data-variant-name attributes. I want to hide the option with data-variant-name="Default" when there are duplicates with the same data-addon-name. I've tried the following script, but it doesn't seem to work as expected: Html: <div id="c-product-bundling"> <select id="ropeEndFinish1" name="properties[End 1 Finish]" data-gtm-form-interact-field-id="1"> <option value="Splice Eyelet End w-Thimble" data-addon-name="Splice Eyelet End w-Thimble" data-addon-price="30.00" data-addon-id="47367371030849" data-variant-name="Default" style="display: initial;">Splice Eyelet End w-Thimble - $30.00</option> <option value="Splice Eyelet End w-Thimble" data-addon-name="Splice Eyelet End w-Thimble" data-addon-price="45.00" data-addon-id="47367371063617" data-variant-name="32mm" style="">Splice Eyelet End w-Thimble - $45.00</option> </select> Another select with the same thing. </div> Jquery // Function to hide the options with the same value and display only the one with variant-name="Default" function hideOptionsWithSameValue() { // Iterate through each select element $("#c-product-bundling select").each( function () { const currentSelect = $(this); console.log( "%cBeing run for" + JSON.stringify(currentSelect, null, "\t"), "color: Cyan; font-family: sans-serif; font-size: 16px" ); // Object to store seen options based on their values const seenOptions = {}; const duplicateDefaultOptions = {}; // Move this line inside the loop // Iterate through each option element currentSelect.find("option").each(function () { const currentOption = $(this); const optionValue = currentOption.data("addon-name"); // Check if an option with the same value has been seen if (seenOptions[optionValue]) { // Record the duplicate option with variant-name="Default" if (currentOption.data("variant-name") === "Default") { duplicateDefaultOptions[optionValue] = true; } } else { // Mark the option as seen seenOptions[optionValue] = true; } }); // Hide the duplicate options with variant-name="Default" for (const optionValue in duplicateDefaultOptions) { currentSelect .find(`option[value="${optionValue}"][data-variant-name="Default"]`) .css("display", "none"); console.log( "%cDuplicate Default option hidden for value: " + optionValue, "color: Cyan; font-family: sans-serif; font-size: 16px" ); } console.log( "%cThese have been marked for seenOptions" + JSON.stringify(seenOptions, null, "\t"), "color: Cyan; font-family: sans-serif; font-size: 16px" ); console.log( "%cThese have been marked for duplicateDefaultOptions" + JSON.stringify(duplicateDefaultOptions, null, "\t"), "color: Cyan; font-family: sans-serif; font-size: 16px" ); } ); console.log( "%cCompleted sorting through all Addon Selects", "color: Cyan; font-family: sans-serif; font-size: 16px" ); } hideOptionsWithSameValue(); Here is the codepen if you want to duplicate https://codepen.io/leebaroneau/pen/oNmPVbB What adjustments should I make to the script to ensure that it correctly hides the "Default" variant only when there are duplicates with the same data-addon-name?
You should be able to first find all the Default options then search for matches using their data-addon-name. If they exist, hide the original. jQuery is completely overkill for a simple operation like this const selector = '[data-variant-name="Default"]'; document.querySelectorAll("#c-product-bundling select").forEach((select) => { select .querySelectorAll(`option[data-addon-name]${selector}`) .forEach((option) => { if ( select.querySelector( `option[data-addon-name="${option.dataset.addonName}"]:not(${selector})`, ) ) { console.log("Removing option", option.textContent.trim()); option.remove(); } }); }); <div id="c-product-bundling"> <select id="ropeEndFinish1" name="properties[End 1 Finish]" data-gtm-form-interact-field-id="1" > <option value="Splice Eyelet End w-Thimble" data-addon-name="Splice Eyelet End w-Thimble" data-addon-price="30.00" data-addon-id="47367371030849" data-variant-name="Default" style="display: initial" > Splice Eyelet End w-Thimble - $30.00 </option> <option value="Splice Eyelet End w-Thimble" data-addon-name="Splice Eyelet End w-Thimble" data-addon-price="45.00" data-addon-id="47367371063617" data-variant-name="32mm" style="" > Splice Eyelet End w-Thimble - $45.00 </option> </select> <p>Another select with the same thing.</p> </div> Run code snippetExpand snippet Note that I've used remove() to completely remove the <option> as hiding the element can have unexpected effects when it comes to the current selection. If you wanted to hide the element anyway, simply use this instead option.style.display = 'none'; option.hidden = true; option.disabled = true; If you're set on a jQuery solution, this is roughly equivalent $("#c-product-bundling select").each((_, select) => { const $select = $(select); $select .find(`option[data-addon-name]${selector}`) .each((_, option) => { const $option = $(option); const others = $select .find(`option[data-addon-name="${$option.data("addon-name")}"]`) .not(option); if (others.length > 0) { $option.remove(); } }); });

December 29, 2023

TurboCommerce make the better internet purchasing globaly

Turbo Multi-language Translator

Make the better internet purchasing globaly

Turbosify SEO Speed Booster

5.0 (7) Free plan available
Get better conversions by improving store loading speed Installed

Turbo Multi-language Chat - AI Customer service in one hand

TurboCommerce make the better internet purchasing globaly
Our products

The help you need, when you need it

App by Turbo Engine

3 apps • 5.0 average rating

Turbosify Speed Booster

5.0 (7)
Get better conversions by optimizing shopify store Google page speed Installed

Turbosify Translator for Wordpress Woocommerce

5.0 (74) Free Wordpress Woocommerce Plugin
Translate your wordpress website to multiple language within 1 click, no configuration needed, no No technical required

Grow your business here

Whether you want to sell products down the street or around the world, we have all the tools you need.