6

The following:

  $("select option:contains(fish)").attr('selected', true);

Works wonderfully in anything below jQuery 1.9, but does not work at all in jQuery 1.9+. I have been searching for any documentation on any change, but have not found anything.

Any idea how to get this code to work with the new jquery?

Example Here (defaults to jQuery 1.4): http://jsfiddle.net/reigel/TZmEw/

4
  • 2
    use .prop() in 1.9 and not .attr().
    – Ohgodwhy
    Jan 16, 2013 at 19:29
  • 1
    This may still be somewhat relevant: stackoverflow.com/questions/5874652/prop-vs-attr
    – Kevin B
    Jan 16, 2013 at 19:32
  • You rarely actually want to work with the attribute, in most cases what you really want is the property.
    – Kevin B
    Jan 16, 2013 at 19:34
  • Thank you! Wasn't aware of this change, maybe I have had my head in the sand... but, I have a whole bunch of code I need to update now. Thank you! Jan 16, 2013 at 19:49

5 Answers 5

17

Use Prop api instead of attr for jquery 1.9.

$("select option:contains(fish)").prop('selected', 'selected');

OR

 $("select option:contains(fish)").prop('selected', true);

Reason : jQuery 1.6 introduced the .prop() method for setting or getting properties on nodes and deprecated the use of .attr() to set properties. However, versions up to 1.9 continued to support using .attr() for specific situations. This behavior in the name of backwards compatibility causes confusion when selectors are used that distinguish between attributes and properties.

Source : http://jquery.com/upgrade-guide/1.9/#changes-of-note-in-jquery-1-9

Mentioned in Attr Api : As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. In addition, .attr() should not be used on plain objects, arrays, the window, or the document. To retrieve and change DOM properties, use the .prop() method.

Source : http://api.jquery.com/attr/#entry-longdesc

2
  • api.jquery.com/attr The jQuery documentation says nothing about attr being deprecated in favor of prop.
    – Eric
    Jan 16, 2013 at 19:37
  • 1
    Just to clarify, the .attr() API is not deprecated. Using the .attr() API improperly is deprecated, and has been since jQuery 1.6. As of version 1.9, jQuery no longer tries to convert .attr() into .prop() automatically because it confuses things even worse -- for example when selecting elements. To change the dynamic value of a form element, use .prop(). May 24, 2013 at 19:46
1
$("select option:contains(fish)").attr('selected', 'selected');
1

Please see the jQuery documentation on the topic with respect to 1.9 specifically. .attr vs. .prop can be confusing since that I know of there is no specific way to know what "properties" are. For all intents and purposes, when changing values that the user has the ability to change .. especially boolean values, you should use .prop

One exception is an input's value -- you should use .val for that. Similarly, it's probably better to use .val to set the <select> elements value -- not easy to do in your case, but it would be more accurate.

jQuery 1.6 introduced the .prop() method for setting or getting properties on nodes and deprecated the use of .attr() to set properties. However, versions up to 1.9 continued to support using .attr() for specific situations.

1

Try this

$("select option").removeAttr('selected').filter(":contains(fish)").attr('selected', true);
0

Since jQuery 1.6, you should be using prop:

$("select option:contains(fish)").prop('selected', true);

In jQuery 1.6.1, they re-introduced this functionality to the attr method, for backwards compatibility (people were complaining). In 1.9 they removed it again, since this functionality has been deprecated long enough.

3
  • The problem is that it doesn't fire an 'onchange' event. Do you know how to make it fire the event? May 12, 2013 at 9:11
  • @GuyKorland - You have to trigger it yourself: $("select").find("option:contains(fish)").prop('selected', true).end().change(); May 12, 2013 at 18:52
  • it doesn't seem like change() really trigger the expected event. May 12, 2013 at 20:46

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.