Jquery selector - text equals - not working

Question

HTML

<select id="myDDL">
    <option selected="selected" value="0">default</option>
    <option value="1">apples</option>
    <option value="2">oranges</option>
</select>

Javascript

setFieldValue("myDDL", "apples");

function setFieldValue(field, value)
{
    var val = $("#" + field + " option[text]");
    console.log(val);
    $("#" + field).val(val);
}

JSFiddle

https://jsfiddle.net/nnvh7e43/

I would like to select an option within a select field based on its text, i.e.:

var val = $("#" + field + " option[text='" + value + "']");

However as soon as I add [text] after option the selector seems to select the entire document, whereas $("#" + field + " option"); simply selects all option tags within the select field, as I would expect.

Could you please explain why it does not recognise "[text]" and how I can correct this?

Thanks

possible duplicate of [jquery find element by text](http://stackoverflow.com/questions/7321896/jquery-find-element-by-text) — Andrey, Sep 14 '15 at 14:17
possible duplicate of [jQuery - setting the selected value of a select control via its text description](http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description) — PeterKA, Sep 14 '15 at 14:52

score 7 · Accepted Answer · answered Sep 14 '15 at 14:15

apples is text of option and not its value. You need to use .filter() function here:

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

Also, You are trying to get the option value by text and then set its value to select. You can rather set the selected property of option to true for setting it selected:

 $("#" + field + " option").filter(function(){
       return $(this).text() === value ;
 }).prop('selected', true);

Working Demo

score 2 · Answer 2 · answered Sep 14 '15 at 14:17

The [] css selector can only be used on attributes (href, selected, value, class, id, ...). You can't use it on the content of an html element.

Milind Anantwar solution is the way to go. Use filter :

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

score 2 · Answer 3 · answered Sep 14 '15 at 14:18

You can do this:

function setFieldValue(field, value) {

    // First filter all option by text, then get that option value
    var val = $("#" + field + " option").filter(function () {
        return $.trim($(this).text()) == value;
    }).val();
    console.log(val);

    // Set the option w/ text value here
    $("#" + field).val(val);
}

FIDDLE DEMO

score 0 · Answer 4 · answered Sep 14 '15 at 14:19

0

Selectors like tagname[attributename] look for an actual attribute on the tagname element. Your option elements do not have a text attribute. So you need to either give them a text attribute or, probably preferable, modify your selector to examine the actual inner text of the element rather than look for an attribute, e.g. with contains:

var val = $("#" + field + " option:contains(" + value + ")");

answered Sep 14 '15 at 14:19

swornabsent

984
1
7
14

will break when option `custard apples` comes – Milind Anantwar Sep 14 '15 at 14:22
Yes was going to say, I intentionally avoided contains because I need an exact match, though i realise I never stated this in the question – AndrewB Sep 14 '15 at 14:24

Jquery selector - text equals - not working

4 Answers4