ansaurus

Question

How do i make the particular item selected in select box using jquery on document load

Answer 1

+1 A:

You can use .val() to set the value of the select. This will select the option with the specified value.

$("#myselect").val('AC');

Example here: http://jsfiddle.net/mtd6z/

fehays 2010-09-29 15:52:59

Answer 2

+5 A:

It should be do-able with:

$('option[value=AC]').attr('selected','selected');

Demo at: jsbin.

David Thomas 2010-09-29 15:53:39

@david: Do we need to add select box id in front of this

Someone 2010-09-29 15:56:39

No, not unless you really want to. It doesn't add anything, except a little specificity. But the `option[value=AC]` is already pretty specific. Unless you have multiple `options` with `value="AC"` you don't need to further specify.

David Thomas 2010-09-29 15:59:07

This only works if you want to compare by value rather than by text. In his example they are the same, but his sample code was trying to check for .text() matching and in most cases this will be different from value.

Sorpigal 2010-09-29 15:59:54

@Sorpigal, true. But I thought I'd answer the question that was asked. And, usually, it's the `value` that's important in an xhtml form element, not the text used to *represent* that option's value.

David Thomas 2010-09-29 16:01:41

is there a reason not to use .val() as in my answer? Just curious because that's what i usually do.

fehays 2010-09-29 16:05:11

Typically yes, however I have had cases where I want to say "The AC item" and not "database ID 4" or similar. It depends on what you're doing.

Sorpigal 2010-09-29 16:05:23

@fehays: He's not asking how to set or read values. He wants to set the selected attribute on a particular option element.

Sorpigal 2010-09-29 16:06:11

@fehays, I'm not sure to be honest. I chose my approach because it *felt* right to me at the time, both approaches seem to work though.

David Thomas 2010-09-29 16:07:13

@Sorpigal: doesn't using .val() do just that when used on a select element?

fehays 2010-09-29 16:11:08

@fehays, while the approaches are functionally equivalent, mine sets (as requested) the `selected` attribute, yours simply pre-selects the option. So, functionally equivalent, but there is a difference.

David Thomas 2010-09-29 16:13:01

@David: I was thinking the same thing, but when I try either method, I don't see any difference in the DOM using firebug. But yes. I agree your approach is more accurate to the specific question asked. Now i'm just getting curious.

fehays 2010-09-29 16:19:36

Using Chrome's web inspector shows the addition of the `selected` attribute in my version, but no DOM change for setting the `val()`. [edited] Oh, actually, no: you're right. There's no difference (which is really odd, since I could've *sworn* it showed up when first I checked the approach worked).

David Thomas 2010-09-29 16:21:14

Yeah it is odd. And if I try to select the currently selected option using 'option[selected="selected"]' that selector doesn't find it for either option. strangeness... EDIT: check it out here http://jsfiddle.net/mtd6z/1/

fehays 2010-09-29 16:28:59

Answer 3

+1 A:

You probably want

 $('#myselect').children('option').filter(function(){ return $(this).text() == 'AC' }).attr('selected', 'selected');

Sorpigal 2010-09-29 15:57:02

You might be right. After reading the part in the post that says "And i dont have the "Value" for option as number" I'm starting to wonder if what the poster meant was they need to compare the text value.

fehays 2010-09-29 16:09:53

Answer 4

A:

I suggest not using Javascript for this (unless some very important reason ) -

It can be simply done this way

<select id ="myselect">
<option value="AA">AA</option>
<option value="AB">AB</option>
<option value="AC" selected="selected">AC</option>
<option value="AD">AD</option>
</select>

Alpesh 2010-09-29 16:15:19

ansaurus

tags:

views:

answers:

How do i make the particular item selected in select box using jquery on document load

related questions