Jquery / JavaScript - SELECT / OPTION Auswahl

[sveka]

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.

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 ...

$(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.

 

[jonas3344]

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:

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

 

[tk1234]

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

document.querySelector('#status').addEventListener('change', function (element) {
  console.log(element.target.value);
});

 

[sveka]

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 ... :(

 

[jonas3344]

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]

Würde es helfen wenn ich Sie an das name-Attribut binde oder gibt es eine elegantere Lösung?

 

[jonas3344]

Wie gesagt, eine klasse ist elegant.

 

[sveka]

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?

 

[jonas3344]

ähm, z.b.

class="form-control form-control-sm status"

 

[sveka]

ähm, z.b.

class="form-control form-control-sm status"

Genau das hatte ich zu Beginn mal versucht, da wollte er nicht. Aber vlt. hatte ich wo anders einen Fehler. Ich versuche es. Danke. :)

 

[basti1012]

Genau das hatte ich zu Beginn mal versucht, da wollte er nicht. Aber vlt. hatte ich wo anders einen Fehler. Ich versuche es. Danke. :)

Dann zeig doch mal wie du es versucht hast?

 

[sveka]

Ich benötige doch nochmal Hilfe bitte.

Hier der aktuelle 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>

<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]

Funktioniert nicht ist keine brauchbare Fehlerbeschreibung.

Wie sieht Dein Debugging-Ansatz aus?

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

 

[sveka]

Die Konsole gibt keine Fehler aus.

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

 

[jonas3344]

Ich sehe nur einen Dropdown.

 

[sveka]

Ich sehe nur einen Dropdown.

Nein. Es sind wie im 1. Beitrag mehrere. Werden dynamisch erzeugt in einer PHP-while-Schleife.

 

[sveka]

Hallo, ich habe noch ein wenig gebastelt. Jetzt habe ich es wie folgt.

<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.

$('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 ...

 

[sveka]

@Sempervivum - Vielen Dank! Das klappt. Ich danke Dir.