Question

我正在尝试使用jQuery构建一个带有级联下拉列表的页面，其中一旦在当前集合中更改了最后一个下拉列表，就会创建一组克隆的下拉列表。我希望这个过程能够持续多达10次，但是我仍然遇到第二个级联设置不能正常工作的问题。

以下是我正在测试的HTML标记的截断版本：

<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>

以下是缩短的测试脚本：

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);
    });
});
});

这是我用完整代码制作的JSfiddle：

http://jsfiddle.net/w8oatxxd/

正如您所看到的，一旦选择了Size并且第一个下拉列表在克隆集中起作用，就会克隆下拉列表，但是级联中断并且克隆集中的第二个下拉列表不会填充。我一直在寻找，似乎无法弄明白这一点。它可能是一个非常简单的解决方案，但我尝试过的任何工作都没有。

请帮忙！

Answer 1

您正尝试在尚不存在的DOM元素上使用侦听器。您需要使用jQuery .on或在克隆它们之后将侦听器添加到新的DOM元素。而不是$.each($('.brand')...只是尝试$('body').on('change','.brand',function(){。应该工作相同。我会弄乱你的小提琴。

http://jsfiddle.net/w8oatxxd/1/

我认为您可能需要查看newRow JS的命名问题，但这会回答并修复您的问题。

$('body').on('change','.brand', function() {

Answer 2

也许是这样的：http://jsfiddle.net/OxyDesign/wndhqt1s/

JS

var maxRows = 9,
    currentRow = 0,
    clone = $('.cascadeDrops').clone();

$('body').on('change', '.brand', 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');
});

$('body').on('change', '.products', 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');
});

$('body').on('change', '.size', function() {
    if(currentRow < maxRows){
        var parentRow = $(this).closest('.cascadeDrops'),
            cls = parentRow.attr('class'),
            newRow = clone.clone().attr('class', cls.replace(/cascade\-drops\-[0-9]/, 'cascade-drops-' + (++currentRow)));

        parentRow.after(newRow);
    }
});

如何在克隆元素上执行jQuery函数？

2 个答案: