JQuery set dropdown list box selected option - not by value, but by display text

Question

This has probably been answered, but I am unable to find the answered question anywhere...

Assuming we have the following HTML...

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Dropdown Test</title>
    </head>
    <body>
        <select name="myDropDownListName" id="myDropDownListID" class="dropdown">
            <option selected="selected" value="0">Please select a value...</option>
            <option value="1">My Custom Value 1</option>
            <option value="2">My Custom Value 2</option>
            <option value="3">My Custom Value 3</option>
        </select>
    </body>
</html>

What would the JQuery command look like to set 'My Custom value 2' to be the currently selected option in the dropdown list box, assuming I do not know the index 'value' value, and can only identify the item by the text 'My Custom Value 2'?

This will help you [link](http://stackoverflow.com/a/3744323/31901650) to get the value. — Gaurav Kalyan, Dec 15 '14 at 20:11
possible duplicate of [jquery : How to select an option by its text?](http://stackoverflow.com/questions/3744289/jquery-how-to-select-an-option-by-its-text) — haxtbh, Dec 15 '14 at 20:12
Answered here: https://stackoverflow.com/questions/17856523/how-to-set-the-selected-option-of-a-select-dropdown-list-with-jquery/17856569#69857266 — vapcguy, Nov 08 '21 at 17:41

Alex Char · Accepted Answer · 2017-01-27T10:34:03.470

5

You can use jquery .filter():

$('#myDropDownListID option').filter(function() {
    //you can use this.innerText too
    return $(this).text() === 'My Custom Value 2';
}).prop('selected', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myDropDownListName" id="myDropDownListID" class="dropdown">
  <option selected="selected" value="0">Please select a value...</option>
  <option value="1">My Custom Value 1</option>
  <option value="2">My Custom Value 2</option>
  <option value="3">My Custom Value 3</option>
</select>

edited Jan 27 '17 at 10:34

answered Dec 15 '14 at 20:14

Alex Char

32,879
9
49
70

I liked all the answers, but I think this one is best. It seems my example is too trivial compared to my real-world problem. The other answers use the 'contains' operator which may find a partial match, whereas this one is succinct and explicit. Also, this example references the dropdown by id, not by element type. – barrypicker Dec 15 '14 at 20:37
I agree but "Also, this example references the dropdown by id, not by element type" is the same, you can put #myDropDownListID instead of select. – sbaglieri Dec 15 '14 at 20:45

score 0 · Answer 2 · answered Dec 15 '14 at 20:12

0

Simply like this :

$('select').val($("select option:contains('My custom Value 2')").val());

answered Dec 15 '14 at 20:12

Mathieu Labrie Parent

2,598
1
9
10

sbaglieri · Answer 3 · 2014-12-15T20:42:20.373

0

Another way... use the contains selector to search for a DOM elem by its content.

$('select>option:contains("My Custom Value 2")').prop('selected', true);

edited Dec 15 '14 at 20:42

answered Dec 15 '14 at 20:15

sbaglieri

319
2
10

Can you explain the line of code so that the original poster understands why this would work? – jessehouwing Dec 15 '14 at 20:36

score 0 · Answer 4 · answered Nov 08 '21 at 17:36

People like to say to use .val(), but as you noticed, it doesn't like to set by text, but by using the index, instead. So you should do a find to get that, then set by it. But even that is only part of the story. You should first deselect all other options, and set the attribute of the option you want as selected using the index that you find.

Btw, I hate the $('#myDropDownListID') syntax because it is useless in SharePoint because it auto-generates GUIDs and puts them after the IDs, forcing you to have to grab it with $('[id*=myDropDownListID]'), with the * indicating that it contains that value, so that is how I will set this up, except I'll leave out the * because it's unnecessary in this case. But this syntax is also very useful if you want to use $ instead of * to say it starts with that value, and you can use title or name instead of id, so it is incredibly versatile, and I wish more people used it.

$(document).ready(function() {
    var yourText = "My Custom Value 2";

    // Remove all 'selected' attributes from all options
    $('select[id="myDropDownListID"] option').removeAttr('selected');

    // Get the index for the value you want to set
    var idx = $('select[id="myDropDownListID"] option').filter(function() {
        return $(this).html() == yourText;
    }).val();

    // Set the dropdown value by index and set it as selected by text
    var dropdownBox = $('select[id="myDropDownListID"]');
    dropdownBox.val(idx);
    dropdownBox.find('option[value="' + yourValue + '"]').attr('selected','selected'); // note that .val() doesn't do this
    dropdownBox.click(); // may be useful and necessary for certain engines to cache the value appropriately

    console.log(dropdownBox.html()); // should show you that the selected option is My Custom Value 2
    console.log(dropdownBox.val());  // should give you the index 2

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<select id="myDropDownListID">
    <option value="1">My Custom Value 1</option>
    <option value="2">My Custom Value 2</option>
    <option value="3">My Custom Value 3</option>
</select>

score 0 · Answer 5 · 2022-10-28T19:05:09.497

0

ddlListItems is ID of ListBox

if ($('#ddlListItems option:selected').text() == 'My Custom Value 2') {
                var itemsByValue = $('#ddlListItems option:selected').text();                   
            }

edited Oct 28 '22 at 19:05

answered Oct 28 '22 at 18:24

The might use a little more explanation ! – 2A-66-42 Nov 01 '22 at 22:12

JQuery set dropdown list box selected option - not by value, but by display text

5 Answers5