如何通过下拉菜单更改段落标记的值

Question

i have problem i don't know how to do this. This is my HTML code. I want javascript code for when i select the month from the select dropdown the below months will automatically change by the next month.

For example when i select jan from the dropdown the first 'p' tag month changes to feb and the second 'p' tag change to march and so on till the end.

 <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

To achieve expected result, use below option of using index of selected option

1. Get index of selected option

2. Using that index , hide rows of table ignoring first row which holds dropdown

 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