Product Categories

const dropdown1 = document.getElementById(‘dropdown1’); const dropdown2 = document.getElementById(‘dropdown2’); const dropdown3 = document.getElementById(‘dropdown3’); const goButton = document.getElementById(‘goButton’); const data = { SiliGum: { “101 methyl”: null, “Methyl Vinyl”: null, “101B Hydroxyl”: null }, SiliRub: { Translucent: [‘Molding’, ‘Extrusion’], Subtranslucent: [‘Molding’, ‘Extrusion’], Common: [‘Molding’, ‘Extrusion’], Economic: [‘Molding’, ‘Extrusion’] }, FumRub: { Standard: [‘Molding’, ‘Extrusion’], Economic: [‘Molding’, ‘Extrusion’], “General Purpose”: null, }, SpeRub: { “Silicone Rubber”: [‘Cable Accessories’, ‘High Rebound’, ‘High Strength Molding’, ‘Food Contact Molding’, ‘Ultra Low Hardness Molding’, ‘Addition-curing’, ‘High Temperature Resistant’, ‘Self-lubricating’, ‘Anti-static’, ‘Flame Retardant’, ‘Ceramic’], “Fumed Silicone Rubber”: [‘Economic High tear Strength’, ‘Standard High tear Strength’, ‘High Transparency’], “Electrical Insulating”: null } }; dropdown1.addEventListener(‘change’, () => { const value = dropdown1.value; dropdown2.innerHTML = ‘Please Select the Subcategory’; dropdown3.innerHTML = ‘Please Select the Application’; dropdown2.disabled = true; dropdown3.disabled = true; goButton.style.display = ‘none’; if (value && data[value]) { dropdown2.disabled = false; for (const key in data[value]) { const option = document.createElement(‘option’); option.value = key; option.textContent = key; dropdown2.appendChild(option); } } }); const noThirdDropdownNeeded = [“101 methyl”, “Methyl Vinyl”, “101B Hydroxyl”, “Electrical Insulating”]; dropdown2.addEventListener(‘change’, () => { const category = dropdown1.value; const subcategory = dropdown2.value; dropdown3.innerHTML = ‘<option value=""Please Select the Application’; dropdown3.disabled = true; goButton.style.display = ‘none’; if (subcategory && data[category][subcategory]) { // Has a third dropdown dropdown3.disabled = false; data[category][subcategory].forEach(product => { const option = document.createElement(‘option’); option.value = product; option.textContent = product; dropdown3.appendChild(option); }); } else if (subcategory && noThirdDropdownNeeded.includes(subcategory)) { // No third dropdown needed goButton.style.display = ‘inline-block’; } }); dropdown3.addEventListener(‘change’, () => { const product = dropdown3.value; goButton.style.display = product ? ‘inline-block’ : ‘none’; }); goButton.addEventListener(‘click’, () => { const product = dropdown3.value; const urlMap = { ‘iPhone’: ‘/products/iphone’, }; const url = urlMap[product]; if (url) { window.location.href = url; } });