当Chrome扩展程序更改选项时，触发选择元素上的事件

Question

在此页面https://fantasy.premierleague.com/a/squad/transfers上有一个下拉菜单，您可以在其中选择玩家的最高价格。然后，它过滤下面的表格，仅显示价格等于或小于所选最高价格的玩家。在我的Chrome扩展程序中，我添加了两个按钮来更改所选选项

/**
 * Increases the price of the /transfers maximum price filter.
 */
function increasePrice() {
  const priceFilter = document.getElementById('ismjs-element-price');
  if (priceFilter.selectedIndex === 0) return;
  priceFilter.selectedIndex -= 1;
  priceFilter.dispatchEvent(new Event('change'));
}

/**
 * Decreases the price of the /transfers maximum price filter.
 */
function decreasePrice() {
  const priceFilter = document.getElementById('ismjs-element-price');
  if (priceFilter.selectedIndex === priceFilter.options.length - 1) return;
  priceFilter.selectedIndex += 1;
  priceFilter.dispatchEvent(new Event('change'));
}

/**
 * Adds the increase and decrease price buttons for filtering players by the their maximum price to
 * the /transfers sidebar.
 */
function addPriceButtons() {
  const priceDiv = document.getElementById('ismr-price');
  if (priceDiv.classList.contains('price-filter')) return;

  priceDiv.className += ' price-filter';
  const increaseButton = document.createElement('div');
  const decreaseButton = document.createElement('div');

  increaseButton.className = 'price-change-button grid-center';
  increaseButton.textContent = '+';
  increaseButton.onclick = increasePrice;
  decreaseButton.className = 'price-change-button grid-center';
  decreaseButton.textContent = '-';
  decreaseButton.onclick = decreasePrice;

  priceDiv.insertAdjacentElement('beforeend', increaseButton);
  priceDiv.insertAdjacentElement('beforeend', decreaseButton);
}

看起来不错，如下面的GIF所示

问题在于它实际上并没有改变表中显示的球员。我以为通过添加

priceFilter.dispatchEvent(new Event('change'));

它将正常工作。我也尝试过“点击”和“输入”，但是这些事件也不起作用。

我还检查了Chrome浏览器中的select元素，以了解它具有哪个事件侦听器，以及是否可以理解它。不幸的是，代码已缩小，所以我真的无法告诉该怎么做。

我想念什么吗？我应该在哪里找出表格的最初过滤方式，以及如何自己触发呢？