Ein - / Ausblenden von Tabellenzeilen basierend auf dropdown-Auswahl

Ich habe ein Datum-Selektor für die Jahre 2012 & 2013. Abhängig von der Auswahl, ich möchte nur die Anzeige von Zeilen mit bestimmten Klassen. Kann jemand bitte zeigen Sie mir, wohin ich gehe falsch gemacht?

jQuery

<script>
$(document).ready(function() {
$(".yr12 td").hide();

$('#selectYr').change(function () {
    var val = $(this).val();
    if (val == yr12) {
         $('.yr12 td').show();
         $('.yr13 td').hide();
    } else {
        $('.yr12 td').hide();
         $('.yr13 td').show();
    }
    });
});

html

<select id="selectYr">
    <option value="yr13">2013</option>
     <option value="yr12">2012</option>
   </select>
<br><br>

<table>
<tr>
<th>Date</th>
<th>Description</th>
</tr>
<tr class="yr13">
<td>February 2013 </td>
<td>Description 1</td>
</tr>
<tr>
<td class="yr13">January 2013</td>
<td>Description 2</td>
</tr>
<tr class="yr12">
<td>November 2012</td>
<td>Description 3</td>
</tr>
<tr class="yr12">
<td>December 2012</td>
<td>Description 4</td>
</tr>
</table>

InformationsquelleAutor squirc77 | 2013-01-31

  1. 5

    Ihnen fehlen die Anführungszeichen um den string:

    if (val == 'yr12') { }
//        ^    ^
    o.mi.gosh. Stunden verloren wegen fehlt Zitate. Ich Danke Dir!!!

    InformationsquelleAutor Joseph Silber

  2. 1

    Sie versuchen, zu vergleichen val in eine andere variable namens yr12, anstatt den Vergleich auf den Wert 'a 12'

    Hier ist der richtige code:

    $(document).ready(function() {
                $(".yr12 td").hide();

                $('#selectYr').change(function () {
                    var val = $(this).val();
                    if (val == 'yr12') {
                         $('.yr12 td').show();
                         $('.yr13 td').hide();
                    } else {
                        $('.yr12 td').hide();
                         $('.yr13 td').show();
                    }
                    });
                });

    InformationsquelleAutor MikeB

  3. 1

    zwei Dinge..

    1 -> 

     <tr>
<td class="yr13">January 2013</td>

    sollte 

    <tr class="yr13">
<td>January 2013</td>

    2--> 

    if (val == "yr12") {

    InformationsquelleAutor arun

Schreibe einen Kommentar