jquery - .val() returning value ATTRIBUTE not content of <option> -

i'm adding own jquery code site built , hosted third party (so can't edit html remove attributes, etc). i'm trying return value of selected item of drop down box (for example 1 goes 100 500 in steps of 100), html:

<select name="ctl00$cpmainbody$optioncalc$quantities" onchange="javascript:settimeout('__dopostback(\'ctl00$cpmainbody$optioncalc$quantities\',\'\')', 0)" id="ctl00_cpmainbody_optioncalc_quantities" class="form-control">   <option selected="selected" value="234">100</option>   <option value="235">200</option>   <option value="236">300</option>   <option value="237">400</option>   <option value="238">500</option> </select> 

and jquery:

function displayvals() {   var dropdowns = $( "#ctl00_cpmainbody_optioncalc_quantities" ).val();   $( "#displaying" ).html( "<strong>value:</strong> " + dropdowns); } $(document).on("change", "select", displayvals); displayvals(); 

what's happening whenever select option drop down, returned value 234 instead of 100, 235 instead of 200, etc.

i'm lost on how have return content of option element instead of value of value attribute?

this expected behavior -- .val() of select value of selected item. should use

var dropdowns = $( "#ctl00_cpmainbody_optioncalc_quantities option:selected" ).text();