多个选择菜单 onChange 通过 ajax 调用按名称更新特定选择菜单答案

【问题标题】：Multiple select menus onChange update specific select menu by name through ajax call多个选择菜单 onChange 通过 ajax 调用按名称更新特定选择菜单
【发布时间】：2021-08-24 11:56:16
【问题描述】：

我有一个表格，允许您通过选择菜单更新产品的主类别和子类别。子类别选择菜单中的选项根据通过 ajax db 调用选择的主类别而变化。如果表单只包含一个产品，我可以通过下面的 JQuery 脚本让它完美地工作。但是，如果表单包含多个产品。每个产品子类别选择菜单也更改为同一组选项

例如：在单一产品上，比如橙汁主要类别 = 水果、沙拉、饮料例如，如果我选择饮料子类别菜单选项正确更新为：玻璃、罐头、纸箱、瓶子这都很好

但是，如果表单包含多个产品，其所有子类别选项也会更新为：玻璃、罐头、纸箱、瓶子

我知道这是因为为每个子类别动态生成的选择名称属性使用相同的名称（请参见下面的示例 html 表单）。

表单和产品是通过 PHP 动态生成的，产品的数量可以从 1 到随便说... 所以我的问题是如何更改以下脚本以更新正确的产品子类别菜单选项而不影响其他产品子类别菜单选项？

$(document).ready(function() {
  $("select[name='Category']").change(function() {
    var CategoryID = $("select[name='Category'] option:selected").val();
    var SubCategoryID = $("select[name='SubCategory'] option:selected").val();    

    if (CategoryID) {     
              $.ajax({
                url: '/__Dependencies/JQuery/GetSubCategories2.script.php',
                type: 'POST',
                data: {Category: CategoryID, SubCategory: SubCategoryID},
                cache: false
            }).done(function(data) {
                $("select[name='SubCategory']").html(data);
                });
                }
    });

JQuery 修改如下：

$(document).ready(function () {
  $("select[name='Category']").change(function () {
     const SelectorName = $(this);
    const Category = $(this).val();
    const $SubCategory = $(this).next();

    // Check that a selector with the name "Category" exists in the html document
    if (!SelectorName) {
      alert("The selector name does not exist in the HTML document!");
    }

    // Validate that field is not empty before AJAX call
    if ($.trim($("Category")) != '') {
      $.ajax({
        type: 'POST',
        url: '/__Dependencies/JQuery/GetSubCat.script.php',
        data: {
          Category: Category,
        },
        cache: false
      }).done(function(data) {
        $SubCategory.html(data);
      });
    }
    });
});

<!doctype html>
<html>
<head>
</head>
<body>

    <form name="updateProducts" action="file.php" method="post">
        <ul>
            <li><label for="Category">Cocoa Cola 330ml</label>
                <div>
                    <select name="Category" id="Category">
                        <option value="8">Bakery</option>
                        <option value="11" selected="selected">Beverages</option>
                        <option value="9">Meat</option>
                        <option value="10">Poultry</option>
                        <option value="1">Vegetables</option>
                    </select>
                    <select name="SubCategory" id="SubCategory">
                        <option value="7">Cans</option>
                        <option value="8">Bottles</option>
                        <option value="2">cartons</option>
                        <option value="4">Glass</option>
                    </select>
                    <button type="submit" name="Submit" value="Update">update</button>
                </div></li>

            <li><label for="Category">Cocoa Cola 500ml</label>
                <div>
                    <select name="Category" id="Category">
                        <option value="8">Bakery</option>
                        <option value="11" selected="selected">Beverages</option>
                        <option value="9">Meat</option>
                        <option value="10">Poultry</option>
                        <option value="1">Vegetables</option>
                    </select>
                    <select name="SubCategory" id="SubCategory">
                        <option value="7">Cans</option>
                        <option value="8">Bottles</option>
                        <option value="2">cartons</option>
                        <option value="4">Glass</option>
                    </select>
                    <button type="submit" name="Submit" value="Update">update</button>
                </div></li>
        </ul>
    </form>
</body>
</html>
});

【问题讨论】：

这没有任何意义 - 如果在您测试的元素上触发的事件是否存在触发您所在的事件的元素。 $("select[name='Category']").change(function () { const SelectorName = $(this);
你的意思可能是if ($SubCategory) ...

标签： javascript jquery

【解决方案1】：

唯一 ID（或不使用 ID）
这将更新页面$("select[name='SubCategory']").html(data);上的所有子目录
使用相对寻址

我个人还会添加一个“请选择”选项 0 并在 ajaxing 之前测试 val 是否为空

先看看这个

$(function() {
  $(".Category]").on("change", function() {
    const category = $(this).val();
    const $subCategorySel = $(this).next(); // sibling element, here the related SubCategory select

    if (category) {
      $.ajax({
        url: '/__Dependencies/JQuery/GetSubCategories2.script.php',
        type: 'POST',
        data: {
          Category: category,
        },
        cache: false
      }).done(function(data) {
        $subCategorySel.html(data);
      });
    }
  });
});

<form name="updateProducts" action="file.php" method="post">
  <ul>
    <li><label for="Category">Cocoa Cola 330ml</label>
      <div>
        <select name="Category" class="Category">
          <option value="8">Bakery</option>
          <option value="11" selected="selected">Beverages</option>
          <option value="9">Meat</option>
          <option value="10">Poultry</option>
          <option value="1">Vegetables</option>
        </select>
        <select name="SubCategory" class="SubCategory">
          <option value="7">Cans</option>
          <option value="8">Bottles</option>
          <option value="2">cartons</option>
          <option value="4">Glass</option>
        </select>
        <button type="submit" name="Submit" value="Update">update</button>
      </div>
    </li>

    <li><label for="Category">Cocoa Cola 500ml</label>
      <div>
        <select name="Category" class="Category">
          <option value="8">Bakery</option>
          <option value="11" selected="selected">Beverages</option>
          <option value="9">Meat</option>
          <option value="10">Poultry</option>
          <option value="1">Vegetables</option>
        </select>
        <select name="SubCategory" class="SubCategory">
          <option value="7">Cans</option>
          <option value="8">Bottles</option>
          <option value="2">cartons</option>
          <option value="4">Glass</option>
        </select>
        <button type="submit" name="Submit" value="Update">update</button>
      </div>
    </li>
  </ul>
</form>

【讨论】：

感谢 Mplugian，您的解决方案运行良好。你能解释一下什么 const $SubCategorySel = $(this).next();是在做？ var SubCategoryID = $("select[name='SubCategory'] option:selected").val();不再需要。它是在我尝试排除故障时意外留下的。
所以类别事件处理程序中的 $(this) 是类别选择。 $(this).next() 是下一个兄弟，表示相关的 SubCategory 选择
嗨 Mplugian，忘记我的最后评论（已删除）。修改后的 JQuery 似乎工作正常。问题是 PHP 脚本无法看到 ajax post 变量。如果我在浏览器中加载脚本页面并回显 POST 值，我会注意到未定义的索引...并且 var_dump 显示为空...但是回显会更新子类别选择具有正确的值...