时间戳

首页 > 解决方案 > 如何通过下拉菜单更改段落标签的值

javascript - 如何通过下拉菜单更改段落标签的值

问题描述

我有问题我不知道该怎么做。这是我的 HTML 代码。我想要javascript代码，当我从选择下拉列表中选择月份时，以下月份将在下个月自动更改。

例如，当我从下拉列表中选择 jan 时，第一个“p”标签月份更改为 feb，第二个“p”标签更改为 March，依此类推直到结束。

<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>

标签： javascriptcssdom

解决方案

要达到预期的结果，请使用以下使用所选选项索引的选项

  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

推荐阅读