Jquery / JavaScript - SELECT / OPTION Auswahl

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

sveka

Mitglied
26 Mai 2006
175
1
18
34
Hallo liebe Leute,

ich habe ein kleines Problem und weiß nicht weiter ...

Ich habe eine SELECT Ausgabe mit OPTION. Die OPTION stammen aus einer DB und werden in einer while-Schleife ausgegeben. Soweit alles gut.

Der Quellext besagter Stelle ist folgender.

PHP:
while($projekt = $projekte_abfragen->fetch())
    {
$selected = $projekt['status'];
                    $idp = $projekt['id'];
                    $options = array('0', '25', '50' , '75' , '100');
                 
                    echo "<select class='form-control form-control-sm' id='status' name='status1'>";
                    foreach($options as $option)
                    {
                       
                        if($selected == $option)
                        {
                            echo "<option selected='selected' value='$option'>$option %</option>";
                        }
                        else
                        {
                            echo "<option value='$option'>$option %</option>";
                        }
                    }
                    echo "</select>";

}

Nun möchte ich, wenn eine OPTION ausgewählt wird, eine Aktion per JQUERY / JavaScript starten.

Das Skript lautet aktuell wie folgt ...

Javascript:
$(document).ready(function(){
    document.querySelector("#status").onchange = function ()
    {
        var status = <?php echo $option ?>;
        // var status = $("#status option:selected").val();
        var id = <?php echo $idp ?>;
       
        console.log(id);
        console.log(status);

        // $('#status_setzen').trigger('click');

       
    }
   
});

Das funktioniert beim 1. SELECT / OPTION Feld sehr gut. Aber spätestens bei der zweiten Ausgabe nicht mehr. Wo ist mein Denkfehler?? Ich bitte um Hilfe ...

In der Konsole kommen KEINE Fehler.

html.png
 

jonas3344

Aktives Mitglied
25 Oktober 2019
159
44
28
38
PHP und JavaScript zu mischen ist nie eine gute Idee.
Was erwartest du dort in $option?

Den gewählten Wert in einem Select erhältst du so:

Code:
$("#status").val();
 

tk1234

Aktives Mitglied
2 September 2020
130
28
28
Das funktioniert beim 1. SELECT / OPTION Feld sehr gut. Aber spätestens bei der zweiten Ausgabe nicht mehr. Wo ist mein Denkfehler?? Ich bitte um Hilfe ...
Das kann ich nicht nachvollziehen, bei mir spuckt der Code bei jedem Option-Element was in der Console aus. Was hast du genau vor? Was sollen die PHP-Variablen im JS-Code?

Und vergiss JQuery, das braucht man heutzutage nicht mehr. Um das ausgewählte Element auszugeben reicht ein
Javascript:
document.querySelector('#status').addEventListener('change', function (element) {
  console.log(element.target.value);
});
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Danke für die Hinweise. Bei mir spuckt er in der Konsole NUR für die 1. Zeile bei OPTION was aus.

Bei den nachfolgenden nicht mehr ... :(

html.png
 

jonas3344

Aktives Mitglied
25 Oktober 2019
159
44
28
38
ah so. Du hast in dem Fall x Select mit der id status. Eine id darf allerdings nur einmal vorkommen.

Du gibst allen select-Elementen dieselbe Klasse und bindest dann den Event-Handler mit der Klasse an die Elemente.
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Würde es helfen wenn ich Sie an das name-Attribut binde oder gibt es eine elegantere Lösung?
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Okay. Da habe ich gleich noch eine Frage. Bei den Klassen gibt es schon mehrere (Einsatz von Bootstrap).

Heißt es gibt bspw. class="form-control form-control-sm"

Wie füge ich für JavaScript / JQuery nun noch eine Klasse die ich ansprechen kann hinzu?
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Ich benötige doch nochmal Hilfe bitte.

Hier der aktuelle Code.

Code:
<form action="intern.php?content=projektuebersicht" method="POST">
        <?php
                    ### Auswertung ####
                    $selected = $projekt['status'];
                    $idp = $projekt['id'];
                    $options = array('0', '25', '50' , '75' , '100');
                  
                    echo '<select class="form-control form-control-sm status" name="status1">';
                    foreach($options as $option)
                    {
                        
                        if($selected == $option)
                        {
                            echo "<option selected='selected' value='$option'>$option %</option>";
                        }
                        else
                        {
                            echo "<option value='$option'>$option %</option>";
                        }
                    }
                    echo "</select>";
                      
                    ?> 
            <input type="hidden" name="idps" value="<?php echo $idp; ?>">
            <button name="status_setzen" type="submit" class="btn btn-xs statuss" style="border: none; background-color: transparent;"></button>
            </form>

Javascript:
<script>
$(document).ready(function()
{
    document.querySelector(".status").onchange = function ()
    {
        $(".statuss").click();
    }
});
</script>

Es funktioniert immer noch nicht. Auch wenn ich jetzt auf die Klasse statt auf die ID zu nutzen ... :(
 

jonas3344

Aktives Mitglied
25 Oktober 2019
159
44
28
38
Funktioniert nicht ist keine brauchbare Fehlerbeschreibung.

Wie sieht Dein Debugging-Ansatz aus?

Die $(document).ready()-Funktion ist unnötig.
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Die Konsole gibt keine Fehler aus.

Beim 1. Dropdown löst er das Ereignis aus, bei allen anderen nicht. :frown:
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Beim 1. Dropdown löst er das Ereignis aus, bei allen anderen nicht.
document.querySelector(".status").onchange = function ()
Das ist genau was querySelector macht: Es liefert nur das erste Element, wenn der Selektor mehrere liefert, wie in deinem Fall mit der Klasse.
Du musst entweder:
  • querySelectorAll verwenden und die Eventlistener in einer Schleife registrieren oder
  • auf Eventbubbling setzen, d. h. einen einzigen Eventlistener auf document und dann event.target auf die Klasse abfragen oder
  • jQuery verwenden, das macht die Prozedur mit der Schleife selbständig.
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Hallo, ich habe noch ein wenig gebastelt. Jetzt habe ich es wie folgt.

PHP:
<form action="intern.php?content=projektuebersicht" method="POST">
        <?php
                    ### Auswertung ####
                    $selected = $projekt['status'];
                    $idp = $projekt['id'];
                    $options = array('0', '25', '50' , '75' , '100');
                  
                    echo '<select class="form-control form-control-sm status" name="status1">';
                    foreach($options as $option)
                    {
                        
                        if($selected == $option)
                        {
                            echo "<option selected='selected' value='$option'>$option %</option>";
                        }
                        else
                        {
                            echo "<option value='$option'>$option %</option>";
                        }
                    }
                    echo "</select>";
                      
                    ?> 
            <input type="hidden" name="idps" class="idprojekt" value="<?php echo $projekt['id']; ?>">
            <button name="status_setzen" type="submit" class="btn btn-xs statuss" style="border: none; background-color: transparent;"></button>
           </form>

Das ist der Teil, der sich immer in einer while-Schleife wiederholt.

Das JS sieht so aus.

Javascript:
$('select').on('change', function()
            {
                let id = jQuery("input[class=idprojekt]").attr('value');
                let status = this.value;
                              
                console.log(id);
                console.log(status);
});

Er gibt mir beim Dropdown jetzt immer den richtigen Wert aus in der Konsole, was so auch sein sollte. Jetzt allerdings gibt er mir beim auszulesenden input-Feld, wo aufgrund der while-Schleife ja immer die richtige ID stehen sollte immer nur die gleiche aus.

Egal ob ich per Klasse, ID oder data-attribut darauf zugreife ...
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Wenn ich das richtig verstehe, ist darum herum noch eine weitere Schleife über Projekte, so dass es mehrere Formulare gibt, nicht wahr? In dem Fall musst Du achtgeben, dass Du das richtige Input nimmst. Du kannst es z. B. mit jQuery-next ermitteln:
Code:
$('select').on('change', function()
            {
                const id = $(this).next('.idprojekt').val();
                // let id = jQuery("input[class=idprojekt]").attr('value');
                let status = this.value;
                              
                console.log(id);
                console.log(status);
});
(ungetestet)