javascript - onchange函数不起作用

Question

我想根据选项值对执行不同任务的 onchange 函数执行 ajax 调用。 Hovewer 函数中有问题，因为它从不 consols “Hello”。你能看出哪里出了问题吗？

我的 HTML

<!-- PRODUCTS display and editing is handled here according USER or ADMIN-->

<div id="pageViewProducts" class="page">
        <div class="lblWrapper"> 
              <button type="button" class="btnShowPage" id="btnCreateProduct" data-showThisPage="pageCreateProduct"><i class="fa fa-plus"></i>&nbsp;Add Product</button>
              <form id="frmSortBy">
                <p>Sort by:</p>
                <select id="sortProductsSelector">
                  <option value="oPriceLowToHigh">PRICE (LOW TO HIGH)</option>
                  <option value="oPriceHighToLow" >PRICE (HIGH TO LOW</option>
                  <option value="oOnSale" id="oOnSale" selected>ON SALE</option>
                </select>
              </form>
              <div id="lblProductList">
                <!-- Generated dynamically -->
              </div>
        </div>
</div>

和JavaScript:

 var optionSelector = document.getElementById("sortProductsSelector");
  optionSelector.addEventListener( "onchange", function() { 
      var request = new XMLHttpRequest();
      request.onreadystatechange = function() {
          if ( this.readyState == 4 && this.status == 200 ) {

          ajProductDataFromServer = JSON.parse( this.responseText );
          console.log( "Response:" + ajProductDataFromServer );


             if( optionSelector.value == "oPriceLowToHigh") {
                 console.log ("Hello")
        }
        }
      }

      request.open( "GET", "api_sort_products.php", true );
      request.send();
  });

Answer 1

我认为这个事件叫做'change':

optionSelector.addEventListener( "change", function() {
    // ...
});