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

Jquery / JavaScript - SELECT / OPTION Auswahl

sveka

Mitglied
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
 
Werbung:
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();
 
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);
});
 
Werbung:
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
 
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.
 
Werbung:
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?
 
Werbung:
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 ... :(
 
Werbung:
Funktioniert nicht ist keine brauchbare Fehlerbeschreibung.

Wie sieht Dein Debugging-Ansatz aus?

Die $(document).ready()-Funktion ist unnötig.
 
Werbung:
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 ...
 
Werbung:
Zurück
Oben