Найти ячейку таблицы на основе изменения значения поиска

Question

Я пытаюсь создать сценарий для поиска значения ячейки таблицы на основе поля выбора (уровня), а затем умножить это значение на поле свободного текста (часы).Чтобы получить общее количество.

Я могу заставить это работать с двумя свободными текстовыми полями, но я озадачен тем, как заставить это работать с полем выбора

Вот основная таблица:

<table id="myTable">
  <thead>
    <th>Level</th>
    <th>Rates</th>

  </thead>
  <tbody>
    <tr>
      <td>level 1</td>
      <td>25</td>
    </tr>
    <tr>
      <td>level 2</td>
      <td>30</td>
    </tr>
    <tr>
      <td>level 3</td>
      <td>35</td>
    </tr>
  </tbody>
</table>

Тогда вот поля ввода:

<input type="text" id="hours">
<select id="rates">
    <option>level 1</option>
    <option>level 2</option>
    <option>level 3</option>
   </select>
   <p>Total <span>zero</span></p>

Тогда это мой сценарий:

jQuery(document).ready(function($) {

        function search( key ) {
        return $('td')
          .filter(function() {
            return $(this).text() == key;
          })
          .closest('tr')
          .find('td')
          .eq(1)
          .text();
      }
      var rate = document.getElementById('rate');
        $(rate).on('click', function() {
        var value = search($(this).val()) || 'zero';
        var hours = document.getElementById('hours').value;
        var Total = parseInt(value)*parseInt(hours);
        $('p').find('span').text(Total);

      });
    });

Хотя я могу заставить этот код работать, если #rate isсвободное текстовое поле, я не могу понять, как заставить его работать на выбранном поле.

Answer 1

Полагаю, вы пропустили символ 's' на идентификаторе выбора.

var rate = document.getElementById('rate');

, который должен быть похож на

var rate = document.getElementById('rates');

, и вы можете использовать on ("изменить")вместо использования события щелчка, поэтому после изменения значения вы можете получить значение.

var rate = document.getElementById('rates');
$(rate).on('change', function() {
  var value = search($(this).val()) || 'zero';
  var hours = document.getElementById('hours').value;
  var Total = parseInt(value)*parseInt(hours);
  $('p').find('span').text(Total);
});