Ankündigung

Einklappen
Keine Ankündigung bisher.

Dropdown-Menu mit Multiselect + Checkboxen

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Dropdown-Menu mit Multiselect + Checkboxen

    Moin Leute, ich bin momentan dabei ein Dropdown-Menu mit einem Multiselect mit Checkboxenzu programmieren. Die zur Auswahl stehenden "Werte" sollen dabei aus einer Tabelle der SQL-Datenbank bereitgestellt werden. Da es eine flexible Tabelle ist soll auch der Multiselect bei jeder abfrage die aktuelle Tabelle wiedergeben.

    Sofern ich es mit einer statischen Ausgabe ausprobiere, sprich der Multiselect und Checkboxen werden im HTML festgelegt, ist dies kein Problem. Es scheitert erst bei der "flexiblen" Ausgabe.

    Die Tabellename: Position
    Spalte mit Primarykey: Nr
    Auszugebene Spalte: Position

    Das genau Problem ist momentan, dass der Reiter "Position" welcher den Multiselect im Untermenü anzeigen soll nicht öffnet.

    Mein Ansatz war, dass ich den Multiselect mit der Standart-Anfrage an die Datenbank ausführen kann (vgl. 29 ff. ).
    HTML-Code:
    <html>
    <head>
            <title>WerSpieltWo/MitwirkendeHinzufügen</title>
            <style><!-- CSS -->
                    .multiselect { width: 200px;}
                    .selectbox {position: relative;}
                    .selectBox select {width: 10%; font-weight: bold;}
                    .overselect {position: absolute;
                                    left: 0; right: 0; top: 0; bottom: 0;}    
                    #checkboxes { display: none;
                                        border: 1px #dadada solid;}
                    #checkboxes label {display: block;}
                    #chekcboxes label:hover    {background-color: #1e90ff;}                                                    
    
            </style>
    </head>
    <body>
        <form>
            <div class=multiselect="multiselect">
                    <div class="selectBox" onclick="showCheckBoxes()">
                            <select>
                                <option>Position</option>
                            </select>
    
                            <div class="overSelect"></div>    
                    </div>        
                <div id="checkboxes">
    <!-- Anweisung (Query) an Datenbank -->
                <?php
                    require_once('Konfig.php');
    
                    $sql= "Select * from Position order by Position";
                    $result=mysqli_query($db_link, $sql);
    
                    while($row=mysqli_fetch_object($result)) {
    
                        echo "<label for=$row->NR><input type='checkbox' id=$row-Nr/>$row->Position</label>";
                    }
                ?>
              </div>    
            </div>
        </form>    
                <script>
                        var expanded = false;
                        function showCheckBoxes() {
                            var checkboxes = document.getElementById("checkboxes");
                            if (!expanded)
                                {
                                    checkboxes.style.display = "block";
                                    expanded = true;
                                }
                        else
                            {
                            checkboxes.style.display = "none";
                            expanded = false;
                            }    
                        }
                </script>
    </body>
    </html>
    Vielleicht könnt ihr mir bei diesem Problem weiterhelfen

  • #2
    Du bist noch nicht so weit PHP und DB mit der Ausgabe zu verbinden.

    Erstelle erst ein mal ein Formular, welches dir sauber die ausgewählte Option übergibt.
    Testen kannst du das im Script mit var_dump($_GET) oder var_dump($_POST).

    IST-Zustand
    HTML-Code:
      <form>         <div class=multiselect="multiselect">                 <div class="selectBox" onclick="showCheckBoxes()">                         <select>                             <option>Position</option>                         </select>
    - Form- Element hat keine Attribute, da fehlt zumindest das multiselect -><form>
    - Attribut class im div ist falsch -> class=multiselect="multiselect"
    -
    onclick ist schon Javascript und sollte nicht innerhalb des HTML vorkommen
    - select hat kein Attribut name, damit kann erst mal gar nichts übermittelt werden -> <select>
    - option sollte ein Attribut value haben -> <option>Position</option>

    Nebenbei bemerkt
    Standart-Anfrage
    Das schreibt man mit d -> Standard

    Wenn du das alles korrigiert hast, gehe schritt für Schritt weiter vor.
    Siehe auch http://wiki.selfhtml.org/wiki/HTML/F.../Auswahllisten

    Kommentar


    • #3
      protestix Wie kann das denn falsch sein, wenn es bei statischen Werten funktioniert?

      - onclick ist schon Javascript und sollte nicht innerhalb des HTML vorkommen
      Soll das dann unter <script> xxx </script>?

      Du bist noch nicht so weit PHP und DB mit der Ausgabe zu verbinden.

      Erstelle erst ein mal ein Formular, welches dir sauber die ausgewählte Option übergibt.
      Testen kannst du das im Script mit var_dump($_GET) oder var_dump($_POST).
      Das geschieht doch mit der PHP Anweisung, zwar nicht mit übertragenen Variablen, sondern mit dem direkten zugriff auf die Datendank.
      Oder meinst du das funktioniert nur wenn ich ein Extra-Forumlar erstelle, durch das ich dann die ausgebenden Werte auf das obige Formular übergeben soll ?

      Kommentar


      • #4
        Repariere doch erst mal dein Formular, da sind doch etliche Fehler drin, die habe ich doch aufgelistet.

        Kommentar


        • #5
          protestix die hast du aufgezählt, das stimmt. Aber ich sehe nicht inwiefern die falsch sind, da es bei einer statischen Ausgabe funktioniert.

          Kommentar


          • #6
            Zeige mal deinen statischen Code.

            Das ist falsch
            HTML-Code:
            <select>
                <option>Position</option>
            </select>
            und kann nicht funktionieren. Link habe ich oben schon mitgeteilt.

            Kommentar


            • #7
              Diese Sache habe ich verändert, mach aber keinen Unterschied.
              HTML-Code:
                    <div class=multiselect="multiselect">
              HTML-Code:
              <html>
              <head>
                      <title>WerSpieltWo/MitwirkendeHinzufügen</title>
                      <style><!-- CSS -->
                              .multiselect { width: 200px;}
                              .selectbox {position: relative;}
                              .selectBox select {width: 10%; font-weight: bold;}
                              .overselect {position: absolute;
                                              left: 0; right: 0; top: 0; bottom: 0;}    
                              #checkboxes { display: none;
                                                  border: 1px #dadada solid;}
                              #checkboxes label {display: block;}
                              #chekcboxes label:hover    {background-color: #1e90ff;}                                                    
              
                      </style>
              </head>
              <body>
                  <form>
                      <div class="multiselect">
                              <div class="selectBox" onclick="showCheckBoxes()">
                                      <select>
                                          <option>Position</option>
                                      </select>
              
                                      <div class="overSelect"></div>    
                              </div>        
                          <div id="checkboxes">
                          <label for="one"><input type="checkbox" id="one"/>A</label>
                          <label for="two"><input type="checkbox" id="two"/>B</label>
                          <label for="three"><input type="checkbox" id="three"/>C<label>
                        </div>     
                      </div>
                  </form>    
                          <script>
                                  var expanded = false;
                                  function showCheckBoxes() {
                                      var checkboxes = document.getElementById("checkboxes");
                                      if (!expanded)
                                          {
                                              checkboxes.style.display = "block";
                                              expanded = true;
                                          }
                                  else
                                      {
                                      checkboxes.style.display = "none";
                                      expanded = false;
                                      }    
                                  }
                          </script>
              </body>
              </html>

              Kommentar


              • #8
                Lies die mal folgende Artikel in der Wissenssammlung durch
                https://php-de.github.io/jumpto/auswahllisten/
                https://php-de.github.io/jumpto/affenformular/

                Dann wird vielleicht vieles klarer.

                Kommentar


                • #9
                  Zitat von protestix Beitrag anzeigen
                  Zeige mal deinen statischen Code.

                  Das ist falsch
                  HTML-Code:
                  <select>
                  <option>Position</option>
                  </select>
                  und kann nicht funktionieren. Link habe ich oben schon mitgeteilt.
                  Doch, kann es, siehe hier:

                  Note: If the value attribute is not specified, the content will be passed as a value instead.

                  Kommentar


                  • #10
                    Es geht um das fehlende Attribut name im Element select. Wenn der nicht angeben ist kann auch nichts übermittelt werden.

                    Bei w3schools sieht das so aus:
                    <select name="cars">
                    da steht dann das option value in cars.

                    N.B.
                    Im übrigen ist w3schools keine offizielle Seite auf die man sich beziehen sollte, Die Seite wird von einer Firma betrieben. Wollte ich nur mal erwähnen, weil schon öfter auf diese Seite gelinkt wurde.

                    Kommentar


                    • #11
                      Zitat von protestix Beitrag anzeigen
                      Es geht um das fehlende Attribut name im Element select. Wenn der nicht angeben ist kann auch nichts übermittelt werden.
                      Ups, war grad nicht auf der Höhe! Sorry!

                      Zitat von protestix Beitrag anzeigen
                      N.B.
                      Im übrigen ist w3schools keine offizielle Seite auf die man sich beziehen sollte, Die Seite wird von einer Firma betrieben. Wollte ich nur mal erwähnen, weil schon öfter auf diese Seite gelinkt wurde.
                      Ich muss sagen, dass ich dort noch nie einen Blödsinn gelesen hätte!

                      Kommentar


                      • #12
                        Sie haben sich gebessert über die Jahre.
                        Du kannst natürlich verlinken wohin du willst, ich wollte das nur erwähnt haben, damit keine falscher Eindruck entsteht.
                        Die offizielle Webseite ist immer noch w3c.org und eine gut Quelle ist meiner Meinung nach auch MDN.

                        Kommentar

                        Lädt...
                        X