jQuery, <select>, options zählen

Chriz · 04.05.2010, 17:00

Hallo,

ich würde gerne über ein jQuery-Objekt (<select>) die Anzahl der Options herausfinden, $("select#myId").options.length klappt schonmal nicht.

Hintergrund:
Ich habe eine verschachtelte Auswahl von zwei Feldern, die linke bestimmt, was in der rechten zu sehen ist. Wenn die linke verändert wird, hole ich per AJAX ein HTML-Template, das mir nur die <option>s dafür ausgegeben hat, Antwort von AJAX also z.B. soetwas:

Code:

<option label="allgemein" value="14">allgemein</option>

(hier Sonderfall: nur ein <option> als Rückgabewert)

Der Code dazu sieht in etwa so aus:

Code:

$.post(url, data, function(response) {
    try {
        // load response into our <select> box
        details.html(response);
        window.console.log(details, response, details.html());
        // ..
        if (details.options.length == 1 && typeof details.onchange == "function") {
            details.onchange();
        }
    } catch (e) {
        // error, load nothing, keep form elements disabled
        window.console.log(e);
        details.html("");
    }
});

Meine Firebugausgabe:

Code:

 jQuery(select#OBJ_LOCATION_DETAIL-2.formElements)
<option label="kein Eintrag" value="1">kein Eintrag</option>
<option label="kein Eintrag" value="1">kein Eintrag</option>

Ziel ist es, wenn nur ein <option>-Element zurückgekommen ist, ich das onchange() dieser zweiten <select>-Box ansteuern möchte.

Ich habe auch schon folgendes probiert:

Code:

var options = $(details + " option");

also die <option>s in ein jQuery-Objekt zu laden und dann die Länge auszulesen.

Jemand ne Idee dazu?

Edit: Das doofe ist, ich kenn den Namen der zweiten <select>-Box garnicht, sondern hab nur dessen jQuery-Objekt, insofern weiß ich auch nicht, wie ich $(??? + " option") bauen könnte, denke funktionieren sollte es ja. Kann ich irgendwie das tatsächliche DOM-Objekt von jQuery() erhalten?

rudygotya · 04.05.2010, 17:04

Code:

$("select#myId").find("option").length

würde ich spontan behaupten

edit: geht auch ohne traversing:

Code:

$("select#myId option").length

edit2:

Am einfachsten würdest du es dir machen, wenn du z.b. json verwendest und jedes option ein object darstellt.
bspw:

Code:

var data = {
    options: [
        {
        val: "xyz",
          text : "xyz",
          label : "xyz"
        },
        { val: "xyz",
          text : "xyz",
          label : "xyz"
        },
        { val: "xyz",
          text : "xyz",
          label : "xyz"
        }
    ],
    success : true
}

fände ich schöner als html zu laden und macht es dir einfacher, das entsprechende Ereignis zu laden

nikosch · 04.05.2010, 17:13

find ist glaube ich nicht nötig.

Code:

$('#myId option').size();

oder

Code:

$('#myId > option').size();

oder

Code:

var mySelect = $('#myId');
$('option' , mySelect).size();

oder

Code:

$('#myId').each(function (){
  var options = $('option' , this);
  alert (options.size());
});

usw.

ODER

Code:

$('#myId').get(0) // hier weiter mit plain DOM/JS

Chriz · 04.05.2010, 17:16

Hallo,

find kannte ich noch garnicht, hab es jetzt so:

Code:

var select = details.get(0);
//window.console.log(select.options, select.length, select.onchange);
if (select.length == 1 && typeof select.onchange == "function") {
  select.onchange();
}

Danke dir trotzdem!

rudygotya · 04.05.2010, 17:19

Schau mal meinen 2. edit an, halte ich für am elegantesten, gar nicht erst html zu laden. Machst dir auch selbst das Arbeiten einfacher und angenehmer.

edit:
Nikosch, size() gibt einfach nur length zurück, von dem her eigentlich unnütz.

nikosch · 04.05.2010, 17:23

Schau Dir auch mal meine div. Ergänzungen an.

[edit]
Vor allem bzgl.

Zitat:

Edit: Das doofe ist, ich kenn den Namen der zweiten <select>-Box garnicht, sondern hab nur dessen jQuery-Objekt, insofern weiß ich auch nicht, wie ich $(??? + " option") bauen könnte, denke funktionieren sollte es ja. Kann ich irgendwie das tatsächliche DOM-Objekt von jQuery() erhalten?

passt die Variante:

$('option' , jQueryObject). ...

oder eben das DOM Object über get(0).

Chriz · 04.05.2010, 17:35

@rudygotya
Ja, prinzipiell sicherlich die Beste Sache, nur ist mein AJAX-Request relativ allgemein gehalten und gibt für diese und ähnliche Aktionen immer nur HTML zurück. Kann man mit jQuery() denn aber (performant, am Besten per Header) herausfinden, ob eine Antwort HTML oder JSON ist?

Der Grund für HTML ist, dass ich ein DOM-Inferno wie bei meinem letzten Projekt vermeiden möchte, sprich jegliche Generierung von HTML soll server-seitig durchgeführt werden. Das hat sicherlich einige Nachteile bei z.B. soetwas wie hier, aber dadurch habe ich Validierung und Design eben nur zentral an einer Stelle (den Views auf dem Server).

@nikosch:

Zitat:

oder eben das DOM Object über get(0).

Ich hatte es zurst über get(), weil ich dachte, ist ja nur ein Objekt drinne, und dann hat .length sogar funktioniert, da eben ein Array der Länge 1 zurück kam, was zufällig auch Sinn machte, weil ich auch nur eine <option> hatte. Aber war natürlich trotzdem falsch. Mit get(0) gehts prima.

nikosch · 04.05.2010, 17:38

jQuery.isPlainObject() – jQuery API
typeof müsste im Prinzip auch gehen.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Zahlen austauschen im String	Kurd Laßwitz	PHP Tipps 2010	6	07.02.2010 18:30
[Erledigt] zahlen mit komma auslesen und als array oder so speichern	php-gamer	PHP Tipps 2010	11	06.02.2010 22:41
<select> Feld mit jQuery ersetzten	mumaha	JavaScript, Ajax und mehr	1	17.01.2010 20:02
Zufallszahlen mit mt_rand() aber keine doppelten zahlen wie stell ich das an?	JackD	PHP Tipps 2009	42	30.09.2009 18:57
[Erledigt] db einträge zählen oder hochzählen lassen?	mistermint	PHP Tipps 2009	2	27.03.2009 14:56
[Erledigt] jQuery Dateien nachladen	Phoscur	JavaScript, Ajax und mehr	7	14.03.2009 13:44
zufalls zahlen kombination	Marti95.	PHP Tipps 2009	34	23.02.2009 20:21
jQuery Plugin - so richtig?	stayInside	JavaScript, Ajax und mehr	5	23.02.2009 12:34
Formular -> Zahlen -> Währung -> mySQL	der_Angler	Datenbanken	3	11.02.2009 14:51
[Erledigt] Eingabe auf Zahlen prüfen	martl666	PHP Tipps 2008	22	15.09.2008 16:16
[Erledigt] MySQL Daten Auswerten / Zählen	Ortus Solis	PHP Tipps 2008	8	10.08.2008 19:42
[gelöst] Zahlen sortieren mit Varchar	moose	Datenbanken	8	21.07.2008 13:53
Zahlen effektiv verschlüsseln	Jacks Rache	PHP Tipps 2006	20	10.07.2006 01:44
Zahlen zusammenzählen	Sonja	PHP Tipps 2006	11	28.03.2006 11:07

04.05.2010, 17:00
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	jQuery, <select>, options zählen Hallo, ich würde gerne über ein jQuery-Objekt (<select>) die Anzahl der Options herausfinden, $("select#myId").options.length klappt schonmal nicht. Hintergrund: Ich habe eine verschachtelte Auswahl von zwei Feldern, die linke bestimmt, was in der rechten zu sehen ist. Wenn die linke verändert wird, hole ich per AJAX ein HTML-Template, das mir nur die <option>s dafür ausgegeben hat, Antwort von AJAX also z.B. soetwas: Code: <option label="allgemein" value="14">allgemein</option> (hier Sonderfall: nur ein <option> als Rückgabewert) Der Code dazu sieht in etwa so aus: Code: $.post(url, data, function(response) { try { // load response into our <select> box details.html(response); window.console.log(details, response, details.html()); // .. if (details.options.length == 1 && typeof details.onchange == "function") { details.onchange(); } } catch (e) { // error, load nothing, keep form elements disabled window.console.log(e); details.html(""); } }); Meine Firebugausgabe: Code: jQuery(select#OBJ_LOCATION_DETAIL-2.formElements) <option label="kein Eintrag" value="1">kein Eintrag</option> <option label="kein Eintrag" value="1">kein Eintrag</option> Ziel ist es, wenn nur ein <option>-Element zurückgekommen ist, ich das onchange() dieser zweiten <select>-Box ansteuern möchte. Ich habe auch schon folgendes probiert: Code: var options = $(details + " option"); also die <option>s in ein jQuery-Objekt zu laden und dann die Länge auszulesen. Jemand ne Idee dazu? Edit: Das doofe ist, ich kenn den Namen der zweiten <select>-Box garnicht, sondern hab nur dessen jQuery-Objekt, insofern weiß ich auch nicht, wie ich $(??? + " option") bauen könnte, denke funktionieren sollte es ja. Kann ich irgendwie das tatsächliche DOM-Objekt von jQuery() erhalten? __________________ "Nuschel ich?" - "Was?" Geändert von Chriz (04.05.2010 um 17:05 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.05.2010, 17:04
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Code: $("select#myId").find("option").length würde ich spontan behaupten edit: geht auch ohne traversing: Code: $("select#myId option").length edit2: Am einfachsten würdest du es dir machen, wenn du z.b. json verwendest und jedes option ein object darstellt. bspw: Code: var data = { options: [ { val: "xyz", text : "xyz", label : "xyz" }, { val: "xyz", text : "xyz", label : "xyz" }, { val: "xyz", text : "xyz", label : "xyz" } ], success : true } fände ich schöner als html zu laden und macht es dir einfacher, das entsprechende Ereignis zu laden __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog Geändert von rudygotya (04.05.2010 um 17:16 Uhr).

04.05.2010, 17:13
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	find ist glaube ich nicht nötig. Code: $('#myId option').size(); oder Code: $('#myId > option').size(); oder Code: var mySelect = $('#myId'); $('option' , mySelect).size(); oder Code: $('#myId').each(function (){ var options = $('option' , this); alert (options.size()); }); usw. ODER Code: $('#myId').get(0) // hier weiter mit plain DOM/JS __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (04.05.2010 um 17:21 Uhr).

04.05.2010, 17:16
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Hallo, find kannte ich noch garnicht, hab es jetzt so: Code: var select = details.get(0); //window.console.log(select.options, select.length, select.onchange); if (select.length == 1 && typeof select.onchange == "function") { select.onchange(); } Danke dir trotzdem! __________________ "Nuschel ich?" - "Was?"

04.05.2010, 17:19
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	Schau mal meinen 2. edit an, halte ich für am elegantesten, gar nicht erst html zu laden. Machst dir auch selbst das Arbeiten einfacher und angenehmer. edit: Nikosch, size() gibt einfach nur length zurück, von dem her eigentlich unnütz. __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog

04.05.2010, 17:38
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	jQuery.isPlainObject() – jQuery API typeof müsste im Prinzip auch gehen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --