CODEWITHSUNDEEP
jquery
Leon
Leon

Reputation: 6554

Working with html tag "select"

html:

<select id="my_select" name="my_select">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>

js:

$("#my_select :contains('two')").first().attr("selected", "selected");

jsfiddle

So, the selected element should be two, but as you see, it's one. How to fix it?

Thanks.

Upvotes: 0

Views: 105

Answers (5)

Richard
Richard

Reputation: 6354

You could just set it's value instead of trying to mess with the HTML 'selected' tag:

if ($("#my_select :contains('two')").length > 0) {
    $("#my_select").val(2);
}

A JSFiddle for it.

Upvotes: 0

wirey00
wirey00

Reputation: 33661

use .prop('selected',true)

$("#my_select :contains('two')").first().prop("selected", true);

http://jsfiddle.net/6Pxz5/

In the .prop() docs it states

selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6, these properties were retrievable with the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.

Nevertheless, the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

The same is true for other dynamic attributes, such as selected and value.

Upvotes: 2

Rituraj ratan
Rituraj ratan

Reputation: 10388

var text1 = 'two';
$("select option").filter(function() {
    //may want to use $.trim in here
    return $(this).text() == text1; 
}).prop('selected', true);

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

Your demo works if you set No wrap - <in body> on jsfiddle...: http://jsfiddle.net/IrvinDominin/3M9cC/8/

A cleaner solution is to use prop instead of attr, I think first is useless in this case so you can omit it.

Quick reference:

The .prop() method is a convenient way to set the value of properties—especially when setting multiple properties, using values returned by a function, or setting values on multiple elements at once. It should be used when setting selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, or defaultSelected. Since jQuery 1.6, these properties can no longer be set with the .attr() method. They do not have corresponding attributes and are only properties.

Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.

Code:

$("#my_select :contains('two')").prop("selected", true);

Demo: http://jsfiddle.net/IrvinDominin/3M9cC/5/

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

Use .prop() instead of .attr()

$("#my_select :contains('two')").first().prop("selected", true);

Upvotes: 2

Related Questions