<select onChange="..."> bei onload

Zentral

Stehe vor folgendem Problem:

Ein Formular mit 2 Dropdowns die per JavaScript voneinander abhängig sind d.h. wenn in Dd 1 eine bestimmte Auswahl getroffen wird erscheint das passende Dd2 in dem das zu Dd1 gehörige angezeigt wird.

Das ganze passiert beim Dd1 mit onChange was er aus der <option value="..."> ausliesst.
Klappt auch alles eindwandfrei und wird nach Absenden des Formulars in die DB eingetragen.

Jetzt möchte ich das ganze editieren können.
Hänge jedoch an diesem Feld. Wie kann ich ihm sagen das er das passende Auswahlfeld anzeigen soll ohne das erst was geändert werden muss im Dd1? Per PHP wird ausgelesen was für eine Kategorie verwendet wird und je nach dem die entsprechende Option als selected markiert das die zuerst dort steht. Wie sage ich ihm jetzt das der onChange schon von statten gegangen ist und er darauf reagieren soll?

sudeki05

Ähm, suchst du vielleicht in diesem Falle "onCreate"? Kenn mich JS nicht sondelrich aus.

Zentral

oncreate klappt leider nicht
Ich hake da an richtig Komplexen if Abfragen rum. Wär ja gelacht wenn es oncreate wäre =D

Aber danke für die Antwort. N Versuch wars wert.

Dodo

suchst du vielleihct selected="selected"?
http://de.selfhtml.org/html/formulare…n_vorselektiert

jojo87

Auch wenn ich nicht sicher bin, dich richtig verstanden zu haben.
Wie wärs mit nem einfachen manuellen Aufruf der change() Funktion (Hoffe, du hast dafür ne vernünftige Funktion geschrieben)?

Und nebenbei:

Zitat

Ich hake da an richtig Komplexen if Abfragen rum.

Das lässt auf einen unsauberen Code schließen.
Zeige zur Not bitte mal deinen Code.

Gruß,
Jojo

Zentral

Zitat

Ich hake da an richtig Komplexen if Abfragen rum.

/ironie off

jojo87
Wie meinst du das mit einem einfach Aufruf der Funktion?
Worüber sollte ich denn die Funktion dann aufrufen lassen?

jojo87

Ich ging davon aus, dass du eine Funktion der Art hast:

Code

<select id="select1" onchange="changeSelect2()">
<option value="bla">Ein Auswahl</option>
</select>

Wobei changeSelect2() (namen sind fiktiv) dann die Aktualisierung des zweiten Selects übernimmt.
Mein Vorschlag wäre gewesen, beim editieren diese dann manuell aufzurufen.

Code

<select id="select2 ">
<option value="bla2">blub</option>
etc.
<script type="text/javascript">
changeSelect2();
</script>

Aber jetzt zeig mal deinen Code her, damit das Ratespielen Ende hat.

Gruß,
Jojo

The User

Also du hast doch unabhängigvon JS beim ersten Select einen Standardwert.
Dann kannst du doch den zweiten Select standardmäßig daran ausrichten...auch unabhängig von JS.

Ich nehme mal an, du meinst, dass je nach Auswahl im Feld1, in Feld2 manche Optionen nicht zur Verfügung stehen?

synaptic

gib mal die beiden option-lists und wie die zugehörigkeit is!

oder noch besser, mach das so, das wert1 aus feld1 dem wert1 aus feld2 zugewisen is.. der rest is dann pillepalle

Zentral

Hier erstmal das JS:

Code

function ChangeForm(kategorie)
{		
	switch(kategorie)
	{
		case "Opel":
			document.getElementById("tag_lala1").style.color = "#000000";
			document.getElementById("tag_lala2").style.color = "#000000";
			document.getElementById("tag_lala3").style.color = "#999999";
			document.getElementById("tag_lala4").style.color = "#000000";
			document.getElementById("tag_lala5").style.color = "#000000";
			document.getElementById("tag_lala6").style.color = "#000000";
			document.getElementById("tag_lala7").style.color = "#000000";
			document.getElementById("tag_lala8").style.color = "#000000";
			document.getElementById("tag_lala9").style.color = "#000000";
			document.getElementById("tag_lala10").style.color = "#000000";
			document.getElementById("tag_lala11").style.color = "#999999";
			document.getElementById("tag_lala12").style.color = "#000000";
			document.getElementById("tag_lala13").style.color = "#000000";
			document.getElementById("tag_lala14").style.color = "#000000";
			document.getElementById("tag_lala15").style.color = "#000000";
			document.getElementById("tag_lala16").style.color = "#000000";

			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = true;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = true;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;
			document.adduploadform.lala.disabled = false;

			document.getElementById("form_format0").style.display = "none";
			document.getElementById("form_format1").style.display = "inline";
			document.getElementById("form_format2").style.display = "none";

			document.getElementById("form_motor0").style.display = "none";
			document.getElementById("form_motor1").style.display = "none";
			document.getElementById("form_motor2").style.display = "inline";
			document.getElementById("form_motor3").style.display = "none";

			document.adduploadform.abschicken.disabled = false;
			document.adduploadform.reset.disabled = false;
		break;
		case "VW":


... usw ...

Alles anzeigen

Wie ihr seht sollen lala1, lala2 ... die im Formular dargestellten Textfelder & Textareas angeben. Welche wo disabled sind wenn in Dropdown 1 etwas ausgewählt wird. So, nun zum Dd1:

Code

<span id="tag_marke">Marke:</span>


		<select name="marke" id="form_marke" size="1" onchange="ChangeForm(document.getElementById('form_marke').value);">
			<option value="">Bitte w&auml;hlen</option>
			<option value="Opel">Album</option>
			<option value="VW">Film</option>
			<option value="Mercedes">Serie</option>
			<option value="BMW">Song</option>
		</select>

Er liest jetzt allerdings erst die Auswahl des Dd2 aus der DB aus sofern etwas in Dd1 ausgewählt wurde, wegen onChange. Habe das ganze natürlich mit PHP noch so bearbeitet das er ein Checked bei der jeweiligen Option setzt sofern es in der DB steht. Was heissen soll, dass beim Eintrag z.B. Opel gewählt wurde, auslesen tut er das beim editieren per PHP und setzt ein "selected" in der Option.

Wie kann ich ihm jetzt sagen das er für das selektierte die onchange Funktion ausführen soll?

Hoffe das ich das jetzt einigermaßen verständlich erklären konnte.

synaptic

also es ist mal gar nich einfach wenn man nur bruchteile von nem script oder quellcode hat... hier gehts ja um helfen, nicht um raten!
da hab ich grad noch ne frage: "welches schweinderl hättens denn gern?"

also ich hab jetzt grad mal ne logik gescripted, die dir aus dem DD2 den ausgewählten index von DD1 übernimmt.
also haste aus DD1 den zweiten eintrag gewählt wird entsprechend auch eintrag 2 aus der DD2 geholt und auch ausgewählt!

ich hoff des war das was du nicht hinbekommen hast, denn irgendwie (nimms mir net bös) kam es mir vor als würdest du die ganze reden ohne wirklich was zu sagen

naja bevor ich auch dahin tendiere hier mal der code

HTML

<html>
<head>
  <title></title>
  <script type="text/javascript">
  function check2nd(){
    var feld1 = document.getElementById("feld1");
  var feld2 = document.getElementById("feld2"); 
  feld2.disabled="";

  var feldval1 = feld1.options[feld1.selectedIndex].value;
  var feldval2 = feld2.options[feld1.selectedIndex].value;
  var feld2select = feld2.options[feld1.selectedIndex];
  feld2select.selected="selected";



  alert("Wert aus DD1: "+feldval1 + "\nWert aus DD2: " + feldval2);

  }
  </script>
</head>
<body>
<select id="feld1" onchange="check2nd();">
  <option selected value="">hier aussuchen</option>
  <option value="f1wert0">feld1wert0</option>
  <option value="f1wert1">feld1wert1</option>
  <option value="f1wert2">feld1wert2</option>
  <option value="f1wert3">feld1wert3</option>
  <option value="f1wert4">feld1wert4</option>
</select>


<select id="feld2" disabled="disabled">
  <option selected value="">hier aussuchen</option>
  <option value="f2wert0">feld2wert0</option>
  <option value="f2wert1">feld2wert1</option>
  <option value="f2wert2">feld2wert2</option>
  <option value="f2wert3">feld2wert3</option>
  <option value="f2wert4">feld2wert4</option>
</select>


</body>
</html>

Alles anzeigen

wegen stundenlohn und bezahlung kannste meine kontodaten auf PN-weg erfragen!

hier noch ne idee aus ner anderen datenbankabfrage in php.. hab da mal was geübt^^ vielleicht is das ja nen stück vom zaun mit dem gewunken werden muss

PHP

<?php
	if (isset($_GET['alter'])) {
		$alter = $_GET['alter'];
	} else {
		$alter = "older";
	}
?>


<select name="alter">
					<option value="older" <?php if ("older" == $alter) echo 'selected="selected"' ?>>&auml;lter</option>
					<option value="younger" <?php if ("younger" == $alter) echo 'selected="selected"' ?>>j&uuml;nger</option>
				</select>

Alles anzeigen

Zentral

Vielen Dank für die Arbeit die du dir dafür gemacht hast.

Das Problem, dass er die Funktion erst beim onChange ausführt ist aber immer noch da. Er soll die Funktion ausführen sobald die Seite geladen ist und erkannt wurde wo der select steht.

synaptic

mmmh dann sollte dir der php-schnipsel helfen die zuletzt gewählte einstellung zu speichern.
die funktion kannste dann ja onload ausführen.. da gibt es evtl noch nen kleinen trick.. und zwar führst du onload eine function aus, die wiederum mit einem timeout ne andere funktion aufruft, machste nen timeout von 500 milisekunden (halbe sekunde halt)
so kannste sicher sein, daß dauch wirklich alle elemente geladen sind.
ansonsten check mal in meinem js-basics-tut die eventhandler ob da was anderes dabei is, was du benutzen könntest

evtl geht des auch wenn du im DD nen onload reinstopfst (habs noch net getestet) und vorher setzte du mit php eine javascript-variable, die zur kontrolle dient.. also das auch wirklich nur nach gesetzter variable die function ausgeführt wird (beim ersten laden der seite soll ja keine transaktion geschehen!

Zentral

Ich komme leider auf keinen grünen Zweig.
Wobei ich doch eigentlich nur möchte das er die onChange Funktion ausführt sobald die Seite zu Ende geladen ist.

Habs mit nem Script probiert das alle 100 ms. überprüft ob alle Elemente geladen wurden und anschliessen zu ner Funktion überspringt die dann die eigentliche Funktion aufruft. Selbst das klappt nicht.

Verzweiflung kommt auf

synaptic

also nochmal kurz zusammengefasst:
du hast ne seite mit formular-elementen (die dropdowns)
du hast diese elemente von einander abhängig gemacht (so wie ich es in meinem javascript oben getan hab oder anders?)
und du willst eine onchange-funktion nicht onchange ausführen sondern onload.

sag bitte ob des soweit korrekt ist und wenn ja, dann poste mal etwas mehr als nur den ausschnitt...
oder mach ne test-datenbank mit nem dump fertig und gib den kompletten code.
was hier abgeht ist rate mal mit rosenthal

Zentral

Stimmt.

Der von mir oben geschrieben Code ist einwandfrei. Dort sieht man die Funktion die beim onChange ausgeführt wird inkl. das Dropdown die den onChange beinhaltet.

Mein Dropdown sieht jetzt in etwa so aus:

PHP

$marke = $row['marke']


      <span id="tag_marke">Marke:</span>


      <select name="marke" id="form_marke" size="1" onchange="ChangeForm(document.getElementById('form_marke').value);">
         <option value="">Bitte w&auml;hlen</option>
         <option value="Opel" <?php if($marke == 'Opel') echo "selected" ?>>Opel</option>
         <option value="VW" <?php if($marke == 'VW') echo "selected" ?>>VW</option>
         <option value="Mercedes" <?php if($marke == 'Mercedes') echo "selected" ?>>Mercedes</option>
         <option value="BMW" <?php if($marke == 'BMW') echo "selected" ?>>BMW</option>
      </select>

Alles anzeigen

Wie man sieht liest er aus und selektiert das entsprechende Feld. Kein Problem, klappt natürlich.

Ganz simple Frage. Wie kann ich die Funktion, die in diesem Dropdown mit onChange aufgerufen wird, direkt nach dem Laden des Elements ausführen?

Es muss erst nach dem Laden des Elements passieren da er ja noch im Element die Abfrage stellt, welches Option selektiert werden soll.

synaptic

also generell is dafür der onload-eventhandler gedacht...

und in deinem ersten codeschnipsel steht ein ... usw... unterm script was wie ich finde auch von der funktionalität nicht ganz durchsichtig ist.
und du kannst deine auswahl von allen formular-elemente mit php in variablen speichern und die form mit action an sich selber übergeben, dann wird die seite neu geladen und du kannst deine ganzen php-variablen in ein javascript stopfen und das wiederrum dann body.onload ausführen

Tags