多产品表单下主分类select变动时仅更新对应子分类select的JQuery实现问题

核心问题 #

• 原有代码使用全局选择器 $("select[name='SubCategory']") 匹配子分类下拉框，会命中页面内所有同名元素，导致修改任意主分类时所有产品的子分类同步更新
• 动态生成的重复ID、重复name属性不仅会导致前端选择器匹配异常，提交表单时也会出现参数覆盖的问题

修复逻辑 #

1. 通过 $(this) 定位当前触发变更事件的主分类下拉框
2. 基于当前主分类的DOM层级，精准匹配同组的子分类下拉框（通过父容器查找的方式容错性更高，避免后续DOM结构调整导致匹配失效）
3. 仅更新匹配到的对应子分类下拉选项
4. 建议调整动态生成的表单字段命名规则，使用数组格式方便后端批量接收参数

修复后的jQuery代码 #

$(document).ready(function() {
  $("select[name^='Category']").change(function() {
    // 定位当前触发事件的主分类下拉框
    const $currentCategory = $(this);
    const categoryId = $currentCategory.val();
    // 匹配同组的子分类下拉框，通过父容器查找更稳定
    const $targetSubCategory = $currentCategory.closest('div').find("select[name^='SubCategory']");
    // 保留当前子分类已选中的值，传给后端用于默认选中
    const currentSubCategoryId = $targetSubCategory.val();

    if ($.trim(categoryId)) {     
      $.ajax({
        url: '/__Dependencies/JQuery/GetSubCategories2.script.php',
        type: 'POST',
        data: {Category: categoryId, SubCategory: currentSubCategoryId},
        cache: false
      }).done(function(data) {
        // 仅更新当前组的子分类选项
        $targetSubCategory.html(data);
      });
    }
  });
});

优化后的HTML结构（解决重复ID、参数覆盖问题） #

<!doctype html>
<html>
<head>
</head>
<body>
    <form name="updateProducts" action="file.php" method="post">
        <ul>
            <li>
                <label>可口可乐 330ml</label>
                <div>
                    <!-- name使用数组格式，后端可直接批量接收 -->
                    <select name="Category[1]" id="Category_1">
                        <option value="8">烘焙类</option>
                        <option value="11" selected="selected">饮料类</option>
                        <option value="9">肉类</option>
                        <option value="10">禽肉类</option>
                        <option value="1">蔬菜类</option>
                    </select>
                    <select name="SubCategory[1]" id="SubCategory_1">
                        <option value="7">罐装</option>
                        <option value="8">瓶装</option>
                        <option value="2">纸盒装</option>
                        <option value="4">玻璃装</option>
                    </select>
                    <button type="submit" name="Submit[1]" value="Update">更新</button>
                </div>
            </li>
            <li>
                <label>可口可乐 500ml</label>
                <div>
                    <select name="Category[2]" id="Category_2">
                        <option value="8">烘焙类</option>
                        <option value="11" selected="selected">饮料类</option>
                        <option value="9">肉类</option>
                        <option value="10">禽肉类</option>
                        <option value="1">蔬菜类</option>
                    </select>
                    <select name="SubCategory[2]" id="SubCategory_2">
                        <option value="7">罐装</option>
                        <option value="8">瓶装</option>
                        <option value="2">纸盒装</option>
                        <option value="4">玻璃装</option>
                    </select>
                    <button type="submit" name="Submit[2]" value="Update">更新</button>
                </div>
            </li>
        </ul>
    </form>
</body>
</html>

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