document.getElementById работает, но $ бросает ошибку

Question

у меня есть этот код здесь:

<select id="test"> 
     <option value="1">test1</option> 
     <option value="2" selected="selected">test2</option> 
     <option value="3">test3</option> 
</select> 

В моем сценарии у меня есть эти две строки кода, один JavaScript и еще один JQuery так:

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

Я даже распечатал те, в моей консоли, как это:

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

Они печатают то же самое. Но когда я пишу код on изменения событий, как это:

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

Это именно то, что печать выбрать из выпадающего списка. Это способ javascript для извлечения из dom работает. То же самое с e1 вот так:

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

бросает ошибку:

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

(видно из инструментов разработчика Хрома)

Что происходит? Я новичок в Javascript и jquery! Почему в моем случае jquery не работает?

Answer 1

Поскольку вы используете JQuery и e1 является объектом JQuery попытка:

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

Чтобы захватить фактический элемент, который вы можете использовать get():

var select = $('#select').get(0) // Grab original DOM element 
select.options // It'll work now... 

Answer 2

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

Answer 3

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

это создает объект javascript.

var e1 = $("#user"); 

Это создает объект jquery. Вы не можете использовать свойства javascript. Вы должны использовать свойства jquery.

Answer 4

В меню выбора, которое вы указываете в верхней части статьи, есть идентификатор 'test' not 'user'. Я предполагаю, что код, на котором вы работаете, имеет идентификатор пользователя. e1 - объект jQuery, поэтому для доступа к его значению используйте e1.val() вместо e1.options [e1.selectedIndex] .text. Вы смешиваете javascript-код с кодом jQuery.

Answer 5

e1 - объект jQuery, потому что вы использовали jQuery для его выбора. Это не обычный элемент js dom, а именно то, как вы пытаетесь его использовать.

Это должно работать лучше:.

$ ("# пользователь") изменить (функция() { console.log (e1.val()); });

val() - это функция jQuery, которая предоставляет унифицированную оболочку для значений элемента формы, поэтому вам не нужно искать выбранный индекс, получить доступ к этому элементу из объекта obj и т. Д. Это одна из вещей, которые jQuery делает облегчает жизнь.