Document.getElementById funktioniert, aber $ wirft einen Fehler

Question

Ich habe hier diesen Code:

        test1
        test2
        test3

In meinem Skript habe ich diese zwei Zeilen Code, eine ist JavaScript und eine andere ist jQuery so :

var e = document.getElementById("user");
var e1 = $("#user");

Ich habe sie sogar in meiner Konsole so ausgegeben:

 console.log(e)
 console.log(e1)

Sie geben dasselbe aus. Aber wenn ich einen on Änderungsereignis-Code wie diesen schreibe:

$("#user").change(function() {
        console.log(e.options[e.selectedIndex].text)
 });

Es gibt genau aus, was ich im Dropdown wähle. Dass diese JavaScript-Methode zur Erfassung vom dom funktioniert. Das Gleiche mit e1 so :

$("#user").change(function() {
    console.log(e1.options[e1.selectedIndex].text)
 });

Wirft einen Fehler aus:

Uncaught TypeError: Cannot read property 'undefined' of undefined (anonymous function)create:167 f.event.dispatchjquery-1.7.1.min.js:3 f.event.add.i.h.handle.i

(gesehen durch die Chrome-Entwicklertools)

Was ist los? Ich bin neu sowohl in JavaScript als auch in jQuery! Warum funktioniert jQuery in meinem Fall nicht?

Answer 1

Da du jQuery benutzt und e1 ein jQuery-Objekt ist, versuche es mit:

console.log(e1.find('option:selected').text())

Um das tatsächliche Element zu erhalten, kannst du get() verwenden:

var select = $('#select').get(0) // Ursprüngliches DOM-Element holen
select.options // Jetzt wird es funktionieren...

Answer 2

var e = document.getElementById("user");

dies erstellt ein JavaScript-Objekt.

var e1 = $("#user");

Dies erstellt ein jQuery-Objekt. Sie können keine JavaScript-Eigenschaften darauf verwenden. Sie müssen jQuery-Eigenschaften verwenden.

Answer 3

console.log(e1[0].options[e1[0].selectedIndex].text)

Answer 4

Das Dropdown-Menü, das Sie ganz oben in Ihrem Artikel angeben, hat eine ID von 'Test' und nicht von 'Benutzer'. Ich gehe davon aus, dass der Code, mit dem Sie tatsächlich arbeiten, eine ID von 'Benutzer' hat. e1 ist ein jQuery-Objekt, also um auf seinen Wert zuzugreifen, verwenden Sie e1.val() anstelle von e1.options[e1.selectedIndex].text. Sie vermischen Javascript-Code mit jQuery-Code.

Answer 5

E1 ist ein jQuery-Objekt, weil du jQuery verwendet hast, um es auszuwählen. Es ist kein normales JS-DOM-Element, das ist jedoch, wie du versuchst es zu verwenden.

Das sollte besser funktionieren:

$("#user").change(function() { console.log(e1.val()); });

val() ist eine jQuery-Funktion, die eine einheitliche Wrapper für Formelementwerte bietet, sodass du nicht den ausgewählten Index finden musst, darauf vom select-Objekt zugreifen musst, usw. Dies ist eine der Dinge, die jQuery tut, die das Leben einfacher machen.