document.getElementById works, but $ is throwing an error
<p>I have this code here : </p>

<pre><code>&lt;select id="test"&gt;
        &lt;option value="1"&gt;test1&lt;/option&gt;
        &lt;option value="2" selected="selected"&gt;test2&lt;/option&gt;
        &lt;option value="3"&gt;test3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

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

<pre><code>var e = document.getElementById("user");
var e1 = $("#user");
</code></pre>

<p>I even printed out those in my console like this : </p>

<pre><code> console.log(e)
 console.log(e1)
</code></pre>

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

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

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

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

<p>is throwing an error : </p>

<p><code>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</code> </p>

<p>(seen from chrome's developer tools)</p>

<p>Whats going on? I'm new to both Javascript and jquery! Why in my case jquery is not working?</p>
