2017-07-04 2 views
0

Ich möchte Folgendes implementieren. Eine Tabelle mit einem Kontrollkästchen in einer Zelle für jede Zeile. Um das Formular zu senden, bietet ein Dropdown-Menü die verschiedenen Aktionen an (verschieben, löschen usw.).Wie erstelle ich ein Formular mit Checkboxen und einem erweiterbaren Dropdown-Menü, um die Aktion auszuwählen

Es würde wie folgt aussehen:

enter image description here

Die Submit-Button mit verschiedenen Aktionen ein hoverable Dropdown wäre:

enter image description here

Der Arbeitscode für die Tabelle:

<form action="/action_page.php" method="get"> 
    <input type="submit" value="Submit">   
    <table> 
     @foreach ($tags as $tag) 
     <tr> 
     <td> 
      <br>{{$tag->title}}</br> 
     </td>     
     <td> 
      <input type="checkbox" name={{$tag->title}} value="true"><br> 
     </td> 
     </tr>  
     @endforeach 
    </table> 
    </form> 

Quelle: https://www.w3schools.com/tags/att_input_checked.asp

Möglicher Code für das hoverable Menü:

<div class="dropdown"> 
    <button class="dropbtn">Dropdown</button> 
    <div class="dropdown-content"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
    </div> 
</div> 

Quelle: https://www.w3schools.com/howto/howto_css_dropdown.asp

Wie dies erreicht werden könnte? Ein Formular hat nur eine Aktion für die Schaltfläche und wie wird die Übergabeschaltfläche in ein erweiterbares Dropdown-Menü umgewandelt?

Vielen Dank.

Antwort

1

Ich glaube, du für so etwas suchen:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="css.css"> 
</head> 
<body> 
    <form method="POST" action="mypage.php"> 
    <div class="dropdown"> 
     <input type="submit" value="dropdown" /> 
      <div class="dropdown-content"> 
       <table border="1" style="width: 160px;"> 
       <tr> 
        <td>rugby</td> 
        <td><input type="checkbox" value="rugby" name="sport[]"/></td> 
       </tr>      
       <tr> 
        <td>tennis</td> 
        <td><input type="checkbox" value="tennis" name="sport[]" /></td> 
       </tr> 
       </table> 
      </div> 
    </div> 
    </form> 
</body> 
</html> 

Sie wählen Elemente aus dem Dropdown-Menü und klicken Sie dann Sie auf die Schaltfläche sumbit sie auf eine PHP-Seite als ein Array zu senden. Die CSS, die ich verwendet habe, ist die gleiche wie im Link des Dropdown-Menüs. Dies ist das Ergebnis:

enter image description here

Hoffe, es hilft.

+0

thx aber es Dropdown nicht – rur2641

+0

Ich kann nicht herausfinden, was Sie damit meinen. Ich habe es auf Google Chrome versucht und wenn ich den Pfeil über die Schaltfläche setze, wird das Menü heruntergelassen –

Verwandte Themen