How to get selected option element attr in jQuery?

Simple use:

$("#select_element").val();

If you want the text of it, then:

$('#select_element option:selected').text();

JSFIDDLE

try this for get the value in the options

$("#select_element").val()

And try this for get the text in te option selected

$('#slcFoo option:selected').text()

You can see the example here

Re your edit showing:

<option val="x">element1</option>

val is not a valid attribute for option elements. The correct attribute is value, or if you want a custom attribute, use a data- prefix (data-val, for instance).

So depending on whether you meant value or data-val:

If you meant value:

$("#select_element").val() does give you the value (value attribute) of the selected option element in the select box:

console.log($("#select_element").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
</select>

If you meant data-val:

If you wanted to get some other attribute from that same option element, you'd do it like this:

var otherAttributeValue = $("#select_element option:selected").attr("data-val");

E.g.:

var otherAttributeValue = $("#select_element option:selected").attr("data-val");
console.log(otherAttributeValue);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="select_element">
  <option data-val="first" value="1">One</option>
  <option data-val="second" value="2" selected>Two</option>
  <option data-val="third" value="3">Three</option>
</select>