title: Get value of selected option using jquery
body: <p>My question may be stupid, because I am new to web development and I am so confused now.</p>
  
  <p>First part of my question is that, sometimes when I print stuff using <code>console.log(some element)</code>, it gives me a giant object with all the listeners but sometimes it just returns a html string merely like this:</p>
  
  <pre><code>&lt;option value="CS 245"&gt;CS 245&lt;/option&gt;
  </code></pre>
  
  <p>The way I found <code>some element</code> like above is using selector as follows:</p>
  
  <pre><code>$( ".course_list option:selected" )[0]
  </code></pre>
  
  <p>I am sorry about my terminology here because I really want to know the difference between the complex object and the object above (also the name of them). I have tried my best to choose my words, but I fail to make it clearer due to lack of experience. If someone understand what I mean please help me edit this question and provide answers, thanks in advance.</p>
  
  <p>Then the second part of my question is that I want to get that "CS 245" string from the above object.I have tried</p>
  
  <pre><code>$( ".course_list option:selected" )[0].val();
  $( ".course_list option:selected" )[0].attr("value");
  $( ".course_list option:selected" )[0].text();
  </code></pre>
  
  <p>but all of them give me this error:</p>
  
  <pre><code>Uncaught TypeError: undefined is not a function 
  </code></pre>
  
  <p>I have included jquery and there is no other <em>crash/file_not_found</em> shown in console. I am using latest bootstrap and formstone selecter, but I am not sure how that affects me here.</p>
  
  <p>Can anybody help?</p>