admin管理员组

文章数量:1415111

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 mand 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 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 mand 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'?

  • javascript
  • jquery
  • html
Share Improve this question asked Dec 15, 2014 at 20:07 barrypickerbarrypicker 10.1k12 gold badges67 silver badges83 bronze badges 3
  • This will help you link to get the value. – Gaurav Kalyan Commented Dec 15, 2014 at 20:11
  • possible duplicate of jquery : How to select an option by its text? – haxtbh Commented Dec 15, 2014 at 20:12
  • Answered here: stackoverflow./questions/17856523/… – vapcguy Commented Nov 8, 2021 at 17:41
Add a ment  | 

5 Answers 5

Reset to default 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./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>

Simply like this :

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

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);

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

ddlListItems is ID of ListBox

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

本文标签：

版权声明：本文标题：javascript - JQuery set dropdown list box selected option - not by value, but by display text - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745207984a2647730.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。