Как изменить значение тега абзаца с помощью выпадающего меню

Question

У меня проблема, я не знаю, как это сделать. Это мой HTML-код. Я хочу получить код JavaScript для того, чтобы при выборе месяца из раскрывающегося списка указанные ниже месяцы автоматически менялись к следующему месяцу.

Например, когда я выбираю jan из выпадающего списка, первый месяц тега p меняется на февраль, а второй тег p меняется на марш и т. Д. До конца.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

    <table class="table ">

      <tbody>
        <tr>
          <td>
            <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
              <select class="mdl-textfield__input" id="octane2" name="octane2">
                <option value="Mar 2019">Mar 2019</option>
                <option value="Apr 2019">Apr 2019</option>
                <option value="Mai 2019">Mai 2019</option>
                <option value="Jun 2019">Jun 2019</option>
                <option value="Jul 2019">Jul 2019</option>
                <option value="Aug 2019">Aug 2019</option>
                <option value="Sep 2019">Sep 2019</option>
                <option value="okt 2019">Okt 2019</option>
                <option value="Nov 2019">Nov 2019</option>
                <option value="Dez 2019">Dec 2019</option>
                <option value="Jan 2020">Jan 2020</option>
                <option value="Feb 2020">Feb 2020</option>
                <option value="March 2020">Mar 2020</option>
                <option value="March 2020">Apr 2020</option>
              </select>
              <label class="mdl-textfield__label" for="octane2">Geschlecht</label>
            </div>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>April 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>May 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>June 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>July 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>Auguest 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>Setember 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>October 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>November 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>December 2019</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>January 2020</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>Febuary 2020</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>March 2020</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
        <tr>
          <td>
            <p>April 2020</p>
          </td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
          <td><i class="text-muted fas fa-baby fa-3x"></i></td>
        </tr>
      </tbody>
    </table>

Answer 1

Для достижения ожидаемого результата используйте указанную ниже опцию использования индекса выбранной опции

1. Получить индекс выбранной опции

2. Используя этот индекс, скрыть строки таблицы, игнорируя первую строку с раскрывающимся списком

document.getElementById('octane2').addEventListener('change', function(event){
 document.querySelectorAll('tr').forEach(v => v.style.display = 'block')
  var index = document.getElementById('octane2').selectedIndex
  var i = 0;
  while(i < index){
    document.getElementsByTagName("tr")[1+i].style.display = 'none';
        i++
     }
})

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

<table class="table ">

  <tbody>
    <tr>
      <td>
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
          <select class="mdl-textfield__input" id="octane2" name="octane2">
            <option value="Mar 2019">Mar 2019</option>
            <option value="Apr 2019">Apr 2019</option>
            <option value="Mai 2019">Mai 2019</option>
            <option value="Jun 2019">Jun 2019</option>
            <option value="Jul 2019">Jul 2019</option>
            <option value="Aug 2019">Aug 2019</option>
            <option value="Sep 2019">Sep 2019</option>
            <option value="okt 2019">Okt 2019</option>
            <option value="Nov 2019">Nov 2019</option>
            <option value="Dez 2019">Dec 2019</option>
            <option value="Jan 2020">Jan 2020</option>
            <option value="Feb 2020">Feb 2020</option>
            <option value="March 2020">Mar 2020</option>
            <option value="March 2020">Apr 2020</option>
          </select>
          <label class="mdl-textfield__label" for="octane2">Geschlecht</label>
        </div>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>April 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>May 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>June 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>July 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>Auguest 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>Setember 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>October 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>November 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>December 2019</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>January 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>Febuary 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>March 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
    <tr>
      <td>
        <p>April 2020</p>
      </td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
      <td><i class="text-muted fas fa-baby fa-3x"></i></td>
    </tr>
  </tbody>
</table>

codepen - https://codepen.io/nagasai/details/WmmgVe