访问html元素值javascript

Question

I've got three dropdown menu's which are dynamically filled from the database each time I select an option in the previous dropdown menu.

Now I want to access the values in these dropdown menu's, so that I can build a SQL-query somewhere later.

I've used the following code to access the HTML elements:

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

This code only works the first time the page loads, so when I mess around with the dropdown menu's, nothing changes.

What I want now, is that each time I select a value in the dropdown menu, it updates the slctTableValue variable.

Answer 1

Bind change event to the drop-down with jquery, then this event will fire whenever there is a change happened on the selected value.

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

Answer 2

You can detect change event like this and update value:

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