3

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>
Sivaprakash
  • 455
  • 1
  • 8
  • 22
Hector
  • 123
  • 3
  • 9
  • Remove the `attr` method and use `value` attribute not `val`. – Ram Nov 06 '14 at 12:50
  • 1
    I Googled the title of your question and found the answer to your problem, you should do the same. http://stackoverflow.com/questions/2230704/jquery-getting-custom-attribute-from-selected-option – fisk Nov 06 '14 at 12:50
  • possible duplicate of [How do you select a particular option in a SELECT element in jQuery?](http://stackoverflow.com/questions/314636/how-do-you-select-a-particular-option-in-a-select-element-in-jquery) – kemicofa ghost Nov 06 '14 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 Nov 06 '14 at 12:55
  • T.J. Crowder thanks for information – Hector Nov 06 '14 at 13:14

4 Answers4

4

Try this:

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

Or

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

both are valid!

Deepak Goswami
  • 2,030
  • 1
  • 16
  • 22
2

Simple use: 

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

If you want the text of it, then: 

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

JSFIDDLE

vaso123
  • 12,347
  • 4
  • 34
  • 64
0

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>
VLAZ
  • 26,331
  • 9
  • 49
  • 67
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • @AlexFilatov: Both of the snippets above do work. I briefly had a non-snippet version of the second one which used an argument rather than `this` (because I misremembered jQuery's `filter` vs. `Array#filter`), perhaps that's what you were seeing? If so, hit refresh. But actually, jQuery has the pseudo-selector `:selected`, so... – T.J. Crowder Nov 06 '14 at 12:57
0

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

Felipe Pincheira
  • 442
  • 1
  • 6
  • 21