Getting the selected option value (NOT text) from dropdown with jQuery

Question

I have a dropdown like so:

<select id="dropdownList">
  <option val="1">Item One</option>
  <option val="2">Item Two</option>
  <option val="3">Item Three</option>
</select>

When I use $('#dropdownList').val(), the value returned is "Item One/Two/Three" rather than the actual option value (1/2/3), which is what I need. I'm not sure if I should be using something other than .val()? I apologize if this has been answered somewhere, but my Google-fu is failing me on this one.

Answer 1

Change your html to the valid value= instead of val=

Answer 2

Try this instead:

<select id="dropdownList">
  <option value="1">Item One</option>
  <option value="2">Item Two</option>
  <option value="3">Item Three</option> <!-- this works -->
  <option val="3">Item Three</option>   <!-- this is what you HAD before -->
</select>

Or if that's not an option, then get the selected index and look for the $(this).attr('val')

Answer 3

try this :

$('#dropdownList option:selected').attr('val')

note : didnt tested