ein Formular mit JQuery nach Seite lädt

Question

Füllen erzeugen ich ein paar <div> mit Informationen wie folgt aus:

@foreach($variables as $variable) 
    <div id="x1_{{$variable->id}}" value="{{$variable->x1}}"></div> 
    <div id="x2_{{$variable->id}}" value="{{$variable->x2}}"></div> 
    <div id="y1_{{$variable->id}}" value="{{$variable->y1}}"></div> 
    <div id="y2_{{$variable->id}}" value="{{$variable->y2}}"></div> 
    <div id="page_{{$variable->id}}" value="{{$variable->page}}"></div> 
    <div id="direction_{{$variable->id}}" value="{{$variable->direction}}"></div> 
    <div id="variable_{{$variable->id}}" value="{{$variable->variable}}"></div> 
@endforeach 

Dann möchte ich ein Formular ausfüllen, wenn die Website geladen wird, und wann immer die Drop-Down-Änderungen. Die Dropdown-Änderung funktioniert, aber die Füllung beim Laden nicht. Hier ist die javascript:

Das funktioniert nicht:

$(document).ready(function() { 
    var drowndown_value = $(this).children(":selected").attr("value"); 
    var x1 = $("#x1_" + drowndown_value).attr("value"); 
    var x2 = $("#x2_" + drowndown_value).attr("value"); 
    var y1 = $("#y1_" + drowndown_value).attr("value"); 
    var y2 = $("#y2_" + drowndown_value).attr("value"); 
    var variable = $("#variable_" + drowndown_value).attr("value"); 
    var regex = $("#regex_" + drowndown_value).attr("value"); 
    var direction = $("#direction_" + drowndown_value).attr("value"); 
    var page = $("#page_" + drowndown_value).attr("value"); 

    $("#x1").val(x1); 
    $("#y1").val(y1); 
    $("#y2").val(y2); 
    $("#x2").val(x2); 
    $("#page").val(page); 
    $("#direction").val(direction); 
    $("#regex").val(regex); 
    $("#variable").val(variable); 
}); 

Dies funktioniert:

$("#variabledropdown").change(function() { 
    var drowndown_value = $(this).children(":selected").attr("value"); 
    var x1 = $("#x1_" + drowndown_value).attr("value"); 
    var x2 = $("#x2_" + drowndown_value).attr("value"); 
    var y1 = $("#y1_" + drowndown_value).attr("value"); 
    var y2 = $("#y2_" + drowndown_value).attr("value"); 
    var variable = $("#variable_" + drowndown_value).attr("value"); 
    var regex = $("#regex_" + drowndown_value).attr("value"); 
    var direction = $("#direction_" + drowndown_value).attr("value"); 
    var page = $("#page_" + drowndown_value).attr("value"); 

    $("#x1").val(x1); 
    $("#y1").val(y1); 
    $("#y2").val(y2); 
    $("#x2").val(x2); 
    $("#page").val(page); 
    $("#direction").val(direction); 
    $("#regex").val(regex); 
    $("#variable").val(variable); 
}); 

Ich bin eine wilde Vermutung zu nehmen und denken, dass:

var drowndown_value = $(this).children(":selected").attr("value"); 

Ist das Problem hier, aber ich bin mir nicht sicher, wie ich es beheben soll. Irgendwelche Vorschläge.

Answer 1

Das Problem ist hier:

var drowndown_value = $(this).children(":selected").attr("value"); 

Wenn Sie dies in dem Änderungsereignis des Dropdownlist zu tun, dann wird $(this) die Dropdownlist sein.

Wenn Sie dies tun in der $(document).ready() Funktion, dann wird $(this) sein das Dokument selbst.

Ihr Code funktioniert im zweiten Fall nicht, da das Dokument nicht die Kinder enthält, die Sie erwarten.

Wenn ich Sie wäre, würde ich beide Instanzen ändern mit:

var selectedValue = $("#variabledropdown").val() 

Ihre Art und Weise tun nicht besonders falsch ist, aber ich würde die obige Alternative bevorzugen, weil es prägnanter ist und (IIRC) etwas schneller.

Ich würde auch befürworten, dass Sie diese beiden Funktionen in einer einzigen Funktion abstrahieren (da sie exakte Kopie/Pasten von einander sind); aber das ist vielleicht über den Rahmen Ihrer Frage hinaus.

---

bearbeiten

Nach this SO question, brauchen Sie nicht für die Option Kinder in einer Dropdownlist zu suchen. Solange die Dropdown-Liste eine einzelne Auswahl ist (d. H. Sie können nicht mehrere Optionen auswählen), sucht .val() automatisch nach der ausgewählten Option.

Beachten Sie, dass dies nur für das Abrufen des Werts funktioniert, nicht für den Text. Wenn Sie den Text der gewählten Option wollen, dann werden Sie tatsächlich für die gewählte Option suchen müssen mit:

var selectedText = $('#variabledropdown :selected').text(); 

Answer 2

Ich löste dies durch eine Änderung:

var drowndown_value = $(this).children(":selected").attr("value"); 

zu:

var drowndown_value = $("#variabledropdown option:first").val(); 

Danke für die Kommentare.