I have been attempting to construct a webpage featuring cascading dropdowns using jQuery. The goal is to generate a duplicate set of dropdowns when the last dropdown in the current set is altered. I aim for this process to repeat up to 10 times, but I constantly encounter an issue where the second set of cascading dropdowns fails to function.
Below is a condensed version of the HTML markup I am experimenting with:
<div class="cascadeDrops cascade-drops-0">
<label class="page1">Brand</label>
<div class="tooltips" title="Please select the brand.">
<select class="brand" id="brand" name="brand" placeholder="Brands">
<option value="">Select Brand</option>
<option value="22 Days Nutrition">22 Days Nutrition</option>
<option value="360CUT">360CUT</option>
<option value="4 Dimension Nutrition">4 Dimension Nutrition</option>
</select>
</div>
<br />
<br />
<label class="page1">Product</label>
<div class="tooltips" title="Please select the product.">
<select class="products" id="products" name="products" placeholder="Products" disabled>
<option value="">Select Product</option>
</select>
</div>
<br />
<br />
<label class="page1">Size</label>
<div class="tooltips" title="Please select the size.">
<select class="size" id="size" name="size" placeholder="Size" disabled>
<option value="">Select Size</option>
</select>
</div>
Here is the abridged test script:
jQuery(function($) {
var products = {
'22 Days Nutrition': ['Select Product', 'Plant Protein Power', 'Protein Bars', 'Vegan Energy Bars'],
'360CUT': ['Select Product', '360INTRA', '360LEAN', '360POST', '360PRE', '360SPORT', '360TEST'],
'4 Dimension Nutrition': ['Select Product', 'Beta Alanine', 'CLA 1250', 'Creatine', 'Men\'s Pro-Vita', 'Omega-3 Plus', 'Pure Garcinia Cambogia Extract', 'Raspberry Ketone Green Coffee Bean', 'Yohimbe Bark', 'Yohimbine HCL'],
},
sizes = {
'360INTRA': ['Select Size', '438 Grams'],
'360LEAN': ['Select Size', '90 Capsules'],
'360POST': ['Select Size', '1296 Grams'],
'360PRE': ['Select Size', '640 Grams'],
'360SPORT': ['Select Size', '384 Grams'],
'360TEST': ['Select Size', '180 Capsules'],
'Beta Alanine': ['Select Size', '100 Capsules', '180 Capsules'],
'CLA 1250': ['Select Size', '120 Softgels', '180 Softgels', '90 Softgels'],
'Creatine': ['Select Size', '100 Grams', '500 Grams', '1000 Grams'],
'Men\'s Pro-Vita': ['Select Size', '2 Caplets'],
'Omega-3 Plus': ['Select Size', '120 Softgels'],
'Plant Protein Power': ['Select Size', '15 Servings', '22 Servings'],
'Protein Bars': ['Select Size', '1 Bar', '12 Bars'],
'Pure Garcinia Cambogia Extract': ['Select Size', '90 Capsules'],
'Raspberry Ketone Green Coffee Bean': ['Select Size', '60 Capsules'],
'Vegan Energy Bars': ['Select Size', '1 - 50g Bar', '12 - 50g Bars'],
'Yohimbe Bark': ['Select Size', '100 Capsules'],
'Yohimbine HCL': ['Select Size', '60 Capsules', '90 Capsules'],
}
$.each($('.brand'), function() {
$(this).change(function() {
var $products = $(this).closest('.cascadeDrops').find('.products');
var brand = $(this).val(), prdcts = products[brand] || [];
var html = $.map(prdcts, function(prdct){
return '<option value="' + prdct + '">' + prdct + '</option>'
}).join('');
$products.html(html).removeAttr('disabled');
});
});
$.each($('.products'), function() {
$(this).change(function() {
var $size = $(this).closest('.cascadeDrops').find('.size');
var product = $(this).val(), szs = sizes[product] || [];
var html = $.map(szs, function(sz){
return '<option value="' + sz + '">' + sz + '</option>'
}).join('');
$size.html(html).removeAttr('disabled');
});
});
var cls = $('.cascadeDrops').attr('class'), i = 0;
var newRow = $('.cascadeDrops').clone().attr('class', cls.replace(/cascade\-drops\-[0-9]/, 'cascade-drops-' + (i+1)));
$.each($('.size'), function() {
$(this).change(function () {
$(this).closest('.cascadeDrops').after(newRow);
});
});
});
Here is the JSfiddle link with the complete code:
It is evident that upon selecting a Size, the dropdowns are duplicated, with the first set functioning correctly in the cloned version. However, the cascade malfunctions as the second dropdown in the cloned set fails to populate. Despite extensive research, I have yet to identify a solution. It is likely a simple fix, but all attempted solutions have been ineffective.
I am seeking assistance. Please, help!