HTML in Dom einbinden???

[eror]

Weiß jemand wie man so-was hier löst?
z.B.
$("select#x").append("<option value='a'>A</option>");
$("select#x").append("<option value='b'>B</option>");

// funktioniert nicht!
$("select#x").find('option')[0].attr('value');

// funktioniert nicht!
document.getElementById("x").getElementsByTagName("option ")[0].getAttribute('value');

[suit]

Weiß jemand wie man so-was hier löst?

Ich Rate einfach mal was du mit "so-was" meinst:

Du scheinst jQuery zu nutzen.

Den Wert eines select-Elements liest du mit $('select').val() aus. An die Werte der einzelen option-Elemente kommst du mittels $('option:nth-child(n)').attr('value'); wobei das mit dem derzeitig ausgewählten wert nichts zu tun hat.

[eror]

Den Wert eines select-Elements liest du mit $('select').val() aus. An die Werte der einzelen option-Elemente kommst du mittels $('option:nth-child(n)').attr('value'); wobei das mit dem derzeitig ausgewählten wert nichts zu tun hat.

Danke. aber das Problem  ist "Titel": "HTML in Dom einbinden???"
Die erstellte Options-Elemente sind nicht im Dom, ich will aber auf die zugreifen! Wie?
jQuery hat eine Funktion .live() gilt aber nur auf Evens!

[Gunnar Bittersmann]

@@eror:

nuqneH

Du solltest schon erwähnen, welches Framework du benutzt. Ich vermute mal jQuery.

// funktioniert nicht!
$("select#x").find('option')[0].attr('value');

$("select#x").find('option') ist ein jQuery-Objekt; kein Array. Du meinst: $("select#x").find('option:first').attr('value');

// funktioniert nicht!
document.getElementById("x").getElementsByTagName("option ")[0].getAttribute('value');

Es gibt auch kein Element vom Typ "option ".
                                         ▲
Qapla'

[eror]

Du solltest schon erwähnen, welches Framework du benutzt. Ich vermute mal jQuery.

Sorry.

$("select#x").find('option') ist ein jQuery-Objekt; kein Array. Du meinst: $("select#x").find('option:first').attr('value');

Auf jQuery-Objekt kann man auch mit [] zugreifen!!! Getestet!

Es gibt auch kein Element vom Typ "option ".

Ok Schreibfehler. ist aber auch ein Beispiel.

Problem  liegt nicht im Schreibfehler sonder: "Titel": "HTML in Dom einbinden???"
Die erstellte Options-Elemente sind nicht im Dom, ich will aber auf die zugreifen! Wie?
jQuery hat eine Funktion .live() gilt aber nur auf Evens!

[suit]

Auf jQuery-Objekt kann man auch mit [] zugreifen!!! Getestet!

Ja, weil es normale JavaScript-Objekte sind, aber du baust damit am Framework vorbei.

Problem  liegt nicht im Schreibfehler sonder: "Titel": "HTML in Dom einbinden???"
Die erstellte Options-Elemente sind nicht im Dom, ich will aber auf die zugreifen! Wie?
jQuery hat eine Funktion .live() gilt aber nur auf Evens!

Du wiederholst dich, sagst aber nicht was du willst.

Wie du an deine option-Elemente kommst, habe ich bereits genannt - das funktioniert totsicher, egal ob die Elemente nachträglich ins DOM eingefügt werden oder immer schon da waren.

[eror]

"das funktioniert totsicher"
ist leider falsch!!! Beispiel:

<select id="y">
 <option value="a" selected >A</option>
 <option value="b" >B</option>
</select>

<select id="x">
</select>

<script type="text/javascript">
  jQuery(function(){
    $("select#x").append("<option value='a' selected >A</option>");
    $("select#x").append("<option value='b'>B</option>");

console.log($("#y").find('option:nth-child("0")').val());
    // console -> a

console.log($("#x").find('option:nth-child("0")').val());
    // console -> (an empty string)
  });
</script>

So ich hoffe jetzt ist klar wo meine Problem liegt!?

[suit]

console.log($("#y").find('option:nth-child("0")').val());
    console.log($("#x").find('option:nth-child("0")').val());

So ich hoffe jetzt ist klar wo meine Problem liegt!?

Ja, dein Problem ist dass du nicht verstanden hast, was val() tut.

val() liefert den aktuelln Wert eines Formularelements und nicht das value-Attribut eines beliebigen Formularelements.

Aber meine Beispiele diesbezüglich ignorierst du gekonnt.

Warum du den Inhalt der value-Attribute der option-Elemente brauchst, verstehe ich aber immer noch nicht.

[eror]

ich glaube wir verstehen uns nicht.
I kann statt .val() auch text() nehmen es funz. trotzdem nicht.
Ich habe keine Zugriff auf die Elemente die ich mit append(), clone(), "ajax"  usw. erstellt habe. Meine Frage ist nur wie kann ich drauf zugreifen? Es kann nicht sein das dafür keine Lösung gibt...

[suit]

Ich habe keine Zugriff auf die Elemente die ich mit append(), clone(), "ajax"  usw. erstellt habe.

Du machst etwas falsch.

Meine Frage ist nur wie kann ich drauf zugreifen?

so wie ich dir sagt

Es kann nicht sein das dafür keine Lösung gibt...

Natürlich nicht, es gibt eine:

Wie bereits erwähnt funktioniert der Vorschlag totsicher.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
	<head>  
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
		<title>option</title>  
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>  
		<script type="text/javascript">  
			// <![CDATA[  
			$(document).ready(function() {  
				$('select').append('<option value="baz">y baz</option><option value="qux">z qux</option>');  
				alert($('select').val());  
				alert($('select option:nth-child(1)').val());  
				alert($('select option:nth-child(2)').val());  
				alert($('select option:nth-child(3)').val());  
			});  
			// ]]>  
		</script>  
	</head>  
	<body>  
  
	<form action="" method="get">  
		<select name="foo">  
			<option value="bar">x bar</option>  
		</select>  
	</form>  
	</body>  
</html>

[eror]

Sorry Sorry Sorry!
Problem lag wo anders. Es funz doch.
5 Stunde für nichts!
Danke

[suit]

val() liefert den aktuelln Wert eines Formularelements und nicht das value-Attribut eines beliebigen Formularelements.

Nachtrag: in neuern jQuery-Versionen scheinbar doch, in der Doku wird das aber trotzdem verschwiegen.

[molily]

$("select#x").find('option') ist ein jQuery-Objekt; kein Array.

Ähm - vielleicht nochmal von ganz vorne anfangen mit dem jQuery-Lernen.

jQuery-Objekte sind keine echten Arrays (d.h. Array.prototype ist nicht in der Prototype-Chain), aber es sind Listen mit DOM-Elementknoten. Es sind Objekte mit numerischen Eigenschaften, also 0, 1, 2, 3 ... Da ist natürlich ein Zugriff mit obj[0] möglich.

So funktioniert jQuery: Man sucht sich mit Selektoren Elemente aus dem DOM heraus und hat sie dann in einem listenartigen Objekt gespeichert. Auf dieser Liste kann man dann Methoden aufrufen.

Mathias

[unknown]

jQuery-Objekte sind keine echten Arrays (d.h. Array.prototype ist nicht in der Prototype-Chain), aber es sind Listen mit DOM-Elementknoten. Es sind Objekte mit numerischen Eigenschaften, also 0, 1, 2, 3 ... Da ist natürlich ein Zugriff mit obj[0] möglich.

Das ist vielleicht möglich und intern so realisiert, aber nicht in der Schnittstelle defieniert. Daher kann es jederzeit geändert werden und sollte/darf auch so nicht verwendet werden.
Allerdings ist get eine Schnittstellenfunktion. Diese gibt dieses Interna nach aussen und kann/sollte verwendet werden.

[unknown]

defieniert

Kauft jemand ein e?

[molily]

Das ist vielleicht möglich und intern so realisiert, aber nicht in der Schnittstelle defieniert.

Es ist durchaus dokumentiert, bspw. in der offiziellen FAQ How do I pull a native DOM element from a jQuery object und wird auch in der von dir verlinkten get()-Beschreibung erwähnt.

Klar, der simple jquery[i]-Zugriff steht nicht in der Methodenreferenz, weil es keine Methode ist, sondern ein grundlegendes Objekt-Feature.

Daher kann es jederzeit geändert werden und sollte/darf auch so nicht verwendet werden. Allerdings ist get eine Schnittstellenfunktion. Diese gibt dieses Interna nach aussen und kann/sollte verwendet werden.

Das stimmt. Der Hinweis auf get() ist richtig und angebracht.

Trotzdem würde ich das realistischer sehen. Sämtlicher jQuery-Code, den ich kenne, basiert auf diesem grundlegenden Pattern: jQuery-Objekte sind Listen von DOM-Elementen. In vielen jQuery-Artikeln, auch seitens John Resig und dem jQuery-Team, wurde neben get() der []-Zugriff propagiert. Es ist natürlich möglich, dass das irgendwann geändert wird, aber diese jQuery-Version würde so ziemlich mit keinem existierenden jQuery-Script und -Plugin kompatibel sein.

jQuery verzichtet bewusst auf effektive Kapselung. Eine (Pseudo-)Kapselung findet sich beispielsweise bei Yahoo UI. Dort stecken die tatsächlichen DOM-Knoten bei NodeLists in einem (pseudo-)privaten Array namens _nodes. Das Facade-Pattern wird dort konsequenter durchgezogen.

Mathias

[fastix®]

Moin!

// funktioniert nicht!
document.getElementById("x").getElementsByTagName("option ")[0].getAttribute('value');

Literatur:

http://de.selfhtml.org/javascript/objekte/options.htm@title=http://de.selfhtml.org/javascript/objekte/options.htm

Schreiben: document.forms['foo'].elements['bar'].options[0].text = "Unsinn";
Schreiben: document.getElementById('x').options[0].text = "Unsinn";

Lesen: x=document.forms['foo'].elements['bar'].options[0].text;
Lesen: x=document.getElementById('x').options[0].text;

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix