Инициировать событие на элементе select при изменении опции с расширением Chrome - PullRequest
0 голосов
/ 23 ноября 2018

На этой странице 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 ниже

enter image description here

Проблема в том, что он фактически не меняет игроков, показанных в таблице.Я думал, что, добавив

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

, это будет работать нормально.Я также пробовал «щелкать» и «вводить», но эти события тоже ничего не делают.

enter image description here

Я также проверилselect элемент в Chrome, чтобы увидеть, какие слушатели событий у него есть, и если бы я мог, возможно, понять это.К сожалению, код минимизирован, поэтому я не могу точно сказать, что делать.

Я что-то упустил?Где я должен узнать, как таблица фильтруется в первую очередь и как я могу вызвать это сам?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...