Zeige Zeilen je nach Dropdown-Option

-2

Ich versuche derzeit, Formular zu erstellen, aber bin zu einem Zeitpunkt fest, Neuling zu Javascript und Jquery. Unten ist der HTML-Code, den ich verwendeZeige Zeilen je nach Dropdown-Option

Was ich versuche zu erreichen ist, dass, wenn der Benutzer 0 wählt keine Zeilen angezeigt wird und wenn er 1 als Dropdown-Option wählt die Anzahl 1 Zeilen und wenn er 2 als Dropdown-Option beide wählt Nummer 1 und Nummer 2 Zeile zeigt und wählt 3 Zeile Nummer 1, Zeile Nummer 2 und Zeile Nummer 3 zeigt und so weiter ...

Können Sie mir bitte bei der Programmierung von Javasript oder jquery für das gleiche helfen?

Number of siblings &nbsp;&nbsp; 
 
<select name="siblingnum"> 
 
    <option>select one</option> 
 
    <option>0</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
</select> 
 
<br> 
 
<br> 
 
<table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> 
 
    <tbody> 
 
    <tr> 
 
     <td style="vertical-align: top;">Number<br></td> 
 
     <td style="vertical-align: top;">Name<br></td> 
 
     <td style="vertical-align: top;">Birthdate<br></td> 
 
     <td style="vertical-align: top;">Class<br></td> 
 
     <td style="vertical-align: top;">Gender<br></td> 
 
     <td style="vertical-align: top;">Schoolname<br></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">1<br></td> 
 
     <td style="vertical-align: top;"><input name="name1"><br></td> 
 
     <td style="vertical-align: top;"><input name="date1"></td> 
 
     <td style="vertical-align: top;"><input name="class1"></td> 
 
     <td style="vertical-align: top;"><input name="g1"></td> 
 
     <td style="vertical-align: top;"><input name="sname1"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">2<br></td> 
 
     <td style="vertical-align: top;"><input name="name2"></td> 
 
     <td style="vertical-align: top;"><input name="date2"></td> 
 
     <td style="vertical-align: top;"><input name="class2"></td> 
 
     <td style="vertical-align: top;"><input name="g2"></td> 
 
     <td style="vertical-align: top;"><input name="sname2"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">3<br></td> 
 
     <td style="vertical-align: top;"><input name="name3"></td> 
 
     <td style="vertical-align: top;"><input name="date3"></td> 
 
     <td style="vertical-align: top;"><input name="class3"></td> 
 
     <td style="vertical-align: top;"><input name="g3"></td> 
 
     <td style="vertical-align: top;"><input name="sname3"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">4<br></td> 
 
     <td style="vertical-align: top;"><input name="name4"></td> 
 
     <td style="vertical-align: top;"><input name="date4"></td> 
 
     <td style="vertical-align: top;"><input name="class4"></td> 
 
     <td style="vertical-align: top;"><input name="g4"></td> 
 
     <td style="vertical-align: top;"><input name="sname4"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">5<br></td> 
 
     <td style="vertical-align: top;"><input name="name5"></td> 
 
     <td style="vertical-align: top;"><input name="date5"></td> 
 
     <td style="vertical-align: top;"><input name="class5"></td> 
 
     <td style="vertical-align: top;"><input name="g5"></td> 
 
     <td style="vertical-align: top;"><input name="sname5"></td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">6<br></td> 
 
     <td style="vertical-align: top;"><input name="name6"></td> 
 
     <td style="vertical-align: top;"><input name="date6"></td> 
 
     <td style="vertical-align: top;"><input name="class6"></td> 
 
     <td style="vertical-align: top;"><input name="g6"></td> 
 
     <td style="vertical-align: top;"><input name="sname6"></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2016-08-23 Jigna Jain

Bitte zeigen Sie, was Sie versucht haben. Dies ist kein Code-Schreibdienst. Von Ihnen wird erwartet, dass Sie versuchen, das Problem zu lösen, und die Leute helfen Ihnen dabei, diesen Code zu reparieren. – charlietfl

Was hast du bisher versucht? Ihre Frage ist mit JavaScript markiert, aber es gibt kein Javascript in Ihrer Frage – baao

Willkommen bei SO. Bitte besuche die [Hilfe] und nimm die [Tour], um zu sehen, was und wie man fragt. Im Moment ist Ihre Frage off topic, da es keine tatsächliche Effor oder Code – mplungjan

-1

Usin jQuery, nur um den Auswahlwert, wenn Sie getroffene Auswahl zu ändern und dann verstecken Sie die Zeilen, die Sie über foreach-Schleife nicht brauchen

$(document).ready(function() { 
    $("select").change(function() { 
     var val = $("select").val(); 
     if (val != 'select one') { 
      var tableRows = $("table tr"); 
      jQuery.each(tableRows, function(i ,tr) { 
       if (i > val) { 
        $(tr).hide(); 
       } else { 
        $(tr).show(); 
       } 
      }) 
     } 
     } 
    ) 
});

Quelle

2016-08-23 11:56:41

Teilen Sie Ihre tbody in thead und tbody, um es weniger kompliziert. Und dann verwende sie einfach in einem change Callback. Mit filter und :lt können Sie Elemente durch index auswählen. Sollte ziemlich einfach zu verstehen sein.

$("select").change(function() { 
 
    var rows = $("tbody tr").hide(); 
 
    var value = $(this).val(); 
 
    
 
    if($.isNumeric(value)) { 
 
     rows.filter(":lt(" + value + ")").show(); 
 
    } 
 
});

tbody tr { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select name="siblingnum"> 
 
    <option>select one</option> 
 
    <option>0</option> 
 
    <option>1</option> 
 
    <option>2</option> 
 
    <option>3</option> 
 
    <option>4</option> 
 
    <option>5</option> 
 
    <option>6</option> 
 
</select> 
 

 

 
<table style="text-align: left; width: 100px;" border="1" cellpadding="2" cellspacing="2"> 
 
    <thead> 
 
    <tr> 
 
     <th style="vertical-align: top;">Number 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Name 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Birthdate 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Class 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Gender 
 
     <br> 
 
     </th> 
 
     <th style="vertical-align: top;">Schoolname 
 
     <br> 
 
     </th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td style="vertical-align: top;">1 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name1"> 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date1"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class1"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g1"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname1"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">2 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g2"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname2"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">3 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g3"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname3"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">4 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g4"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname4"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">5 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g5"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname5"> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td style="vertical-align: top;">6 
 
     <br> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="name6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="date6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="class6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="g6"> 
 
     </td> 
 
     <td style="vertical-align: top;"> 
 
     <input name="sname6"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Quelle

2016-08-23 11:48:33 eisbehr

Gibt das erwartete Verhalten – charlietfl

Es ist jetzt correcte @charlietfl Bitte entfernen Sie Downvote! Danke für einen Hinweis. – eisbehr

-3

Versuchen Sie diesen Code

$(document).ready(function() { 
    $("select[name='siblingnum']").change(function() { 
     $("tr").show(); 
     var selectValue = eval($(this).val()); 
     $("tr:gt("+selectValue+")").hide(); 
    }); 
});

Quelle

2016-08-23 11:58:30

Zeige Zeilen je nach Dropdown-Option

Antwort

Verwandte Themen