动态生成行的级联下拉选择仅首行生效问题解决方案咨询

问题根源 #

• 页面ID重复：HTML规范要求同一页面ID唯一，你新增的动态行都复用了attribute_name和attribute_value两个ID，导致选择器只能匹配到第一个元素
• 事件绑定未覆盖动态元素：原代码直接把change事件绑定在初始加载的#attribute_name元素上，后续动态新增的下拉框没有绑定对应的触发事件

修复方案 #

第一步：修改下拉框的属性定义 #

把PHP输出的两个下拉框的ID去掉，替换为class标识，避免ID重复：

// 原来的属性名下拉框定义，去掉id，增加class attribute-name
$att_name = "<select name='attribute_name' class='form-control country attribute-name'>";
// 原来的属性值下拉框定义，去掉id，增加class attribute-value
$att_value = "<select name='attribute_id' class='form-control attribute-value'>";

同时修改动态新增行的HTML代码，同样去掉ID，保留class：

// add_attribute_row函数里的下拉框部分改成
"<td><select name='attribute_name' class='form-control attribute-name'><option value='0'></option><option value='Colour'>Colour</option><option value='Size'>Size</option></select></td><td><select name='attribute_id' class='form-control attribute-value'><option value='0'></option><option data-parent='Colour' value='1'>Black</option><option data-parent='Colour' value='2'>Camo</option><option data-parent='Colour' value='3'>Purple</option><option data-parent='Size' value='4'>Small</option><option data-parent='Size' value='5'>Medium</option><option data-parent='Size' value='6'>Large</option></select></td>"

第二步：替换原有事件绑定代码为事件委托写法 #

把原来的change事件绑定代码删掉，换成下面的事件委托写法，绑定在静态存在的表格父级上，所有动态新增的元素也能触发事件：

$(document).on('change', '.attribute-name', function () {
    // 获取当前选中的属性名
    const selectedParent = $(this).val();
    // 找到当前行对应的属性值下拉框
    const $valueSelect = $(this).closest('tr').find('.attribute-value');
    // 遍历选项过滤显示
    $valueSelect.children().each(function () {
        $(this).data('parent') === selectedParent ? $(this).show() : $(this).hide();
    });
    // 切换属性名后自动清空值下拉框的选中状态
    $valueSelect.val(0);
});

可选优化 #

你可以在页面初始化的时候就隐藏所有属性值的选项，等用户选中属性名之后再显示对应选项，避免初始状态下展示全部可选值。

内容的提问来源于stack exchange，提问作者user16881755