Question

I have this code here :

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

In my script I have these two line of code, one is JavaScript and another one is jquery like so :

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

I even printed out those in my console like this :

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

They are printing same thing. But when I write a on change event code like this :

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

It is exactly printing what I choose from drop down. That this javascript way of fetching from dom is working. The same thing with e1 like so :

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

is throwing an error :

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

(seen from chrome’s developer tools)

Whats going on? I’m new to both Javascript and jquery! Why in my case jquery is not working?

Answer 1

Since you’re using jquery and e1 is a jquery object try:

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

To grab the actual element you can use get():

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