I want to get attribute value of selected option element.

jQuery:

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

HTML:

 <select id="select_element" class="selectpanel">
     <option val="x">element1</option>
     <option val="y">element2</option>
 </select>

I want to get attribute value of selected option element.

jQuery:

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

HTML:

 <select id="select_element" class="selectpanel">
     <option val="x">element1</option>
     <option val="y">element2</option>
 </select>

• javascript
• jquery
• element
• attr

• Remove the attr method and use value attribute not val. – Ram Commented Nov 6, 2014 at 12:50
• 1 I Googled the title of your question and found the answer to your problem, you should do the same. stackoverflow./questions/2230704/… – fisk Commented Nov 6, 2014 at 12:50
• possible duplicate of How do you select a particular option in a SELECT element in jQuery? – kockburn Commented Nov 6, 2014 at 12:53
• val is not a valid attribute for option elements. The attribute is value. If you want a custom attribute, use a data- prefix. – T.J. Crowder Commented Nov 6, 2014 at 12:55
• T.J. Crowder thanks for information – Hector Commented Nov 6, 2014 at 13:14

4 Answers 4

Try this:

$('#select_element option:selected').attr('val');

Or

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

both are valid!

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./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./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>