Setting a SELECT element by text, not value

Question

I'm sure this is relatively easy and straightforward, but I'm having no success figuring it out.

I am trying to set the selected option of a drop down list element using the following code:

        if ($(this).attr("tagName") == "SELECT") {

            oldValue = $(this).parent().parent().find('span.displayField').text();
            $(this).val(oldValue).attr("selected", "selected");
            return;
        }

But it is not changing the select element at all. The code is definitely running, and oldValue is being populated appropriately.

Can anyone see what I might be missing?

Thanks!

UPDATE:

For clarification, here is the HTML:

        <span class="displayField">Pending</span>
        <span class="editField">            
            <select data-val="true" data-val-number="The field ProgramStatusId must be a number." data-val-required="The ProgramStatusId field is required." id="ProgramListViewModels_0__ProgramStatusId" name="ProgramListViewModels[0].ProgramStatusId">
            <option value="1">Pending</option>
            <option value="2">Tabled</option>
            <option value="3">Approved</option>
            <option value="4">Declined</option>
            </select>  
        </span>

What exactly are you trying to select? The element with $('span.displayField').text() as the current text? — Jim Mitchener
– Jim Mitchener, Commented May 16, 2011 at 15:52
Possibly duplicate of: http://stackoverflow.com/questions/496052/jquery-setting-the-selected-value-of-a-select-control-via-its-text-description — pixelbobby
– pixelbobby, Commented May 16, 2011 at 15:52
@jcm - That is correct. I have the text of the original choice in that span, and I'd like to revert the drop down list to that choice. I don't know it's value, only it's text. — Ben Finkel
– Ben Finkel, Commented May 16, 2011 at 15:57
It is, but as the comments notes the answer no longer works after jQuery 1.4. I didn't see a functonal update to it. — Ben Finkel
– Ben Finkel, Commented May 16, 2011 at 16:09

gen_Eric · Accepted Answer · 2011-05-16 16:09:01Z

2

$(this).val(oldValue) will set the value of this to oldValue, and you just wanna find options with that texy. You want to use :contains() for this.

    if ($(this).is('select')) {
        oldValue = $(this).parent().parent().find('span.displayField').text();
        $('option:contains('+oldValue+')', this).attr("selected", "selected");
        return;
    }

Or if there are multiple options that contain the text, but are different, try this:

    if ($(this).is('select')) {
        oldValue = $(this).parent().parent().find('span.displayField').text();
        $('option', this).filter(function(){
          return this.text === oldValue;
        }).attr("selected", "selected");
        return;
    }

edited May 16, 2011 at 16:09

answered May 16, 2011 at 15:54

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Finkel Over a year ago

This is close, except the value attributes of my options are not the same as the text, so $('option[value="'+oldValue+'"]',this) doesn't actually find anything.

gen_Eric Over a year ago

@Ben: Oops, try this. I changed value= to :contains(, this should find what you want.

Ben Finkel Over a year ago

This appears to have done the trick! Thank you also for the $(this).is() syntax. I was not aware of that.

Jim Mitchener · Accepted Answer · 2011-05-16 16:03:58Z

1

If I Understand your snippet correctly. I believe what you're trying to do is select the item with the same text() as $('span.displayField').

if ($(this).attr('tagName') == 'SELECT') {
    // unselect previously selected element first.
    var prev = $(this).find('option:selected').attr('selected', false);

    // select item with text from span.displayField
    var oldText = $(this).parent().parent().find('span.displayField').text();
    var oldOption = $(this).find('option[text="' + oldText + '"]');

    oldOption.attr('selected', true);
}

edited May 16, 2011 at 16:03

answered May 16, 2011 at 15:58

Jim Mitchener

9,0238 gold badges42 silver badges56 bronze badges

1 Comment

Ben Finkel Over a year ago

thank you, the "unselect" portion above was extremely helpful (I hadn't yet considered it). using "option[text=" did not seem to work, but Rocket's answer above ("option:contains") did work.

zod · Accepted Answer · 2011-05-16 15:54:39Z

0

I dont understand what is that

).parent().parent().

if you just want to set select box value selected try these

http://api.jquery.com/val/

$('select.foo option:selected').val();    // get the value from a dropdown select
$('select.foo').val();                    // get the value from a dropdown select

answered May 16, 2011 at 15:54

zod

12.5k25 gold badges74 silver badges107 bronze badges

3 Comments

Jim Mitchener Over a year ago

parent() is a jquery DOM traversal function for getting the direct parent tag of the current element. api.jquery.com/category/traversing

zod Over a year ago

yes i know , but if he give the id of the select box , he can avoid this parent.parent. if there is no duplicate element id . Is it?

Ben Finkel Over a year ago

I am traversing up through the DOM in order to get the text that I want to set the select element to. This is happening in response to a button click and that text represens what I wish to set the select element to, regardless of what the user may have done up to that point.

Collectives™ on Stack Overflow

Setting a SELECT element by text, not value

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related