Please Select the Main Category
Silicone Gum
Silicone Rubber
Fumed Rubber
Special Rubber
Please Select the Subcategory
Please Select the Application
Go!
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;
}
});
Go!