Jquery Get Specific Option Tag Text

jQuery get specific option tag text

It's looking for an element with id list which has a property value equal to 2.

What you want is the option child of the list:

$("#list option[value='2']").text()

How do you select a particular option in a SELECT element in jQuery?

A selector to get the middle option-element by value is

$('.selDiv option[value="SEL1"]')

For an index:

$('.selDiv option:eq(1)')

For a known text:

$('.selDiv option:contains("Selection 1")')

EDIT: As commented above the OP might have been after changing the selected item of the dropdown. In version 1.6 and higher the prop() method is recommended:

$('.selDiv option:eq(1)').prop('selected', true)

In older versions:

$('.selDiv option:eq(1)').attr('selected', 'selected')

EDIT2: after Ryan's comment. A match on "Selection 10" might be unwanted. I found no selector to match the full text, but a filter works:

 $('.selDiv option')
    .filter(function(i, e) { return $(e).text() == "Selection 1"})

EDIT3: Use caution with $(e).text() as it can contain a newline making the comparison fail. This happens when the options are implicitly closed (no </option> tag):

<select ...>
<option value="1">Selection 1
<option value="2">Selection 2
   :
</select>

If you simply use e.text any extra whitespace like the trailing newline will be removed, making the comparison more robust.

jQuery get specific option tag text and placing dynamic variable to the value

Change this:

$get = $("#UserTypeDropdown option[value = '$temp']").text();

To:

$get = $("#UserTypeDropdown option[value='"+$temp+"']").text();

You could also use the filter method:

$("#UserTypeDropdown option").filter(function() {
     return this.value === $temp;
}).text();

Get option's value by text

var text = "All day";

var value = $("option").filter(function() {
  return $(this).text() === text;
}).first().attr("value");

How to get label of select option with jQuery?

Try this:

$('select option:selected').text();

jQuery Get Selected Option From Dropdown

For dropdown options you probably want something like this:

For selected text

var conceptName = $('#aioConceptName').find(":selected").text();

For selected value

var conceptName = $('#aioConceptName').find(":selected").val();

The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.

Get selected option's text in an HTML select using jQuery

You cannot use selector like this:

$('.productOptionViewSelect option:eq(1)')

because in this result set only one of those options will have index 1 - the index of the second option in second .productOptionViewSelect div will get the index equal to the index of the last option in first div plus 2.

Therefore yo should iterate over those 2 sets of options and use .text():

$('.productOptionViewSelect').each(function(){
    console.log($(this).find('option:eq(1)').text());
});

Output:

Frame Size
Photo Size

jQuery get selected option value (not the text, but the attribute 'value')

04/2020: Corrected old answer

Use :selected pseudo selector on the selected options and then use the .val function to get the value of the option.

$('select[name=selector] option').filter(':selected').val()

Side note: Using filter is better then using :selected selector directly in the first query.

If inside a change handler, you could use simply this.value to get the selected option value. See demo for more options.

//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val()); 
console.log('Selected option value ' + $('select option').filter(':selected').text());

$('select').on('change', function () {
  //ways to retrieve selected option and text outside handler
  console.log('Changed option value ' + this.value);
  console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
  <option value="1" selected>1 - Text</option>
  <option value="2">2 - Text</option>
  <option value="3">3 - Text</option>
  <option value="4">4 - Text</option>
</select>

---

Related Topics