Onchange功能不起作用

Question

我想对根据选项值执行不同任务的onchange函数执行ajax调用。 Hovewer功能有问题，因为它永远不会消耗“你好”。你能发现什么错吗？

我的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() {
    // ...
});