訪問html元素值javascript

Question

我有三個下拉菜單，每次我在上一個下拉菜單中選擇一個選項時，它們都會從數據庫中動態填充。

現在，我想訪問這些下拉菜單中的值，以便稍后可以在某個地方構建SQL查詢。

我使用以下代碼訪問HTML元素：

$( window ).load(function(){
    var e = document.getElementById("slctTable");
    var slctTableValue = e.value;
    console.log(slctTableValue);
});

該代碼僅在頁面首次加載時起作用，因此當我在下拉菜單上亂七八糟時，沒有任何變化。

我現在想要的是，每次我在下拉菜單中選擇一個值時，它都會更新slctTableValue變量。

Answer 1

將更改事件綁定到帶有jquery的下拉菜單，然后只要所選值發生更改，就會觸發此事件。

$("#slctTable").change(function() {
  var slctTableValue = $(this).val();
  console.log(slctTableValue);
});

Answer 2

您可以像這樣檢測更改事件並更新值：

    document.getElementById('slctTable').addEventListener('change',function(){
       var e = document.getElementById("slctTable");
       var slctTableValue = e.value;
       console.log(slctTableValue);
    });