javascript - 将从 AJAX 调用的内容用于另一个 AJAX 调用

Question

在我的表单将被操作的页面上，我将在页面加载后立即执行以下 AJAX 调用。我想要一个 vendor 和产品 ID 的下拉列表。此 AJAX 调用引用连接到数据库的 url，并提取所有当前 ID 值并将它们放入 <option> 中。 <select> 下的标签下拉元素。

$(function(){
    // this is getting the dropdown values for the Supplier ID dropdown
    $.ajax({
      url: "getSuppliers.php",
      async: true,
      success: function(result) {
        $("#supplier").html(result);
      }
    })


    // this is getting the dropdown values for the Product ID dropdown
    $.ajax({
      url: "getProducts.php",
      async: true,
      success: function(result) {
        $("#products").html(result);
      }
    })

  });

我的下一步是调用 AJAX 来在此下拉项更改时执行某些操作。我对 <select> 做了以下操作两者中的元素 getSuppliers.php和 getProducts.php我刚刚提到的。

  <option name="supplierID" value=$row["SupplierID"] onchange="suppChange()"> $row["SupplierID"] </option>";

我正在调用函数，suppChange()当此下拉值更改时执行。我有suppChange()在我的表单所在的主文件中(我有前两个 AJAX 调用的同一个文件)。 suppChange()看起来像这样:

  function suppChange() {
      $.ajax({
        url: "displaySuppliers.php",
        async: true,
        success: function(result) {
          $("#supplierStatic").html(result);
          $("#products").html("TESTING");
        }
      })
  }

当我更改表单时，没有任何反应。它与无效的 <option> 无关，因为我尝试使用 console.log(supplierID) 获取此值并获得正确的值(value)。我只是想知道为什么 onchange=suppChange()当我更改下拉菜单时没有做任何事情并调用函数。

Answer 1

onchange应该用在select标签中，不能用在option标签中

https://www.w3schools.com/jsref/event_onchange.asp