change option selected

[esthera]

how do I change the selected option

I have

<select name="scattributes" id="attop38" onChange='checkstock(38,39,2155);'>
<option value=''>-First Select Color-</option>
<option value=1993>N:Navy</option>
<option value=1997>BK:Black</option>
<option value=2200>O:Orchid</option>
</select></span>
<span id=span39><label>Size</label>
<select name="scattributes" id="attop39" onChange='checkstock(39,,2155);'>
<option value=''>-Next Select Size-</option>
<option value=2151>AXXS:Adult XXS</option>
<option value=2055>AXS:Adult XS</option>
<option value=2010>AS:Adult S</option>
<option value=2008>AM:Adult M</option>
<option value=2006>AL:Adult L</option>
<option value=2004>AXL:Adult XL</option>
</select>


I want in my function to for example say

test("1993")

and this should
set the select box above to have the 1993 option selected

[sunfighter]

<script type="text/javascript">
document.getElementById("attop38").options[1].selected = true;
</script>

Place after the page loads

[esthera]

is there anyway to access it instead of the number - by id or by value?

[WolfShade]

document.getElementById("attop38").options[document.getElementById("attop38").selectedIndex].value;

document.getElementById("attop38").options[document.getElementById("attop38").selectedIndex].text;

[Philip M]

Originally Posted by esthera

is there anyway to access it instead of the number - by id or by value?

Yes, but clumsy:-

<select name="scattributes" id="attop38" onChange='checkstock(38,39,2155);'>
<option value=''>-First Select Color-</option>
<option value=1993>N:Navy</option>
<option value=1997>BK:Black</option>
<option value=2200>O:Orchid</option>
</select>

<script type = "text/javascript">
var sel = document.getElementById("attop38");
for (var i =0; i<sel.length; i++) {
var val = sel[i].value;
if (val == 1993) {
sel.selectedIndex = i;
}
}

alert ("The selected index is now " + sel.selectedIndex)

</script>

A select list option cannot have an id. Instead of the option value you could use the option text:-

var val = sel.options[i].text;
if (val == "N:Navy") {

I'm not paranoid! Which of my enemies told you this?

[esthera]

I don't care what the current selected index is

all I want to do is change the selected index

so if i call the function with a 1993 it would select Navy as that is the id of 1993

[Old Pedant]

function test( setValue )
{
    var sel = document.getElementById("attop38");
    for ( var i = 0; i < sel.options.length; ++i )
    {
        if ( sel.options[i].value == setValue ) 
        {
            sel.selectedIndex = i;
            return; // found it and done
        }
    }
    // no match...do nothing?
}

so if i call the function with a 1993 it would select Navy as that is the id of 1993

No. "Navy" is the .text for the <option> with a .value of 1993. There is no id involved in this, except perhaps the id of the <select>. You are using the wrong terminology, which I guess confused the issue.

[WolfShade]

Options don't have "ID".. text, value.. I think that's it.

[Philip M]

Originally Posted by WolfShade

Options don't have "ID".. text, value.. I think that's it.

Yes, I think that has been made clear already. Text, value and selectedIndex.

[sunfighter]

Use this esthera:

<script type="text/javascript">
x = document.getElementById("attop38").options.length;
for(y=0; y<x; y++){
	if(document.getElementById("attop38").options[y].value == '1993')
		document.getElementById("attop38").options[y].selected = true;
}
</script>

[Old Pedant]

Sunfighter:

Aside from the fact that you keep repeating the code document.getElementById("attop38") instead of assigning it once to a local variable, how is that different that the code I showed?

Oh...wait...I see...You set the <option>'s selected property to true whereas I changed the selectedIndex. So long as the <select> is not set to muliple, though, those are equivalent.

[Logic Ali]

function myFunc( v )
{
  document.getElementById( "attop38" ).value = v;
}

[Old Pedant]

At least some older browsers won't support that, LogicAli. (Older versions of FireFox didn't, for example, as I remember finding out the hard way.) Quite possibly (even probably) they are ones he doesn't care about, but...

[sunfighter]

Originally Posted by Old Pedant

Sunfighter:

Aside from the fact that you keep repeating the code document.getElementById("attop38") instead of assigning it once to a local variable, how is that different that the code I showed?

Oh...wait...I see...You set the <option>'s selected property to true whereas I changed the selectedIndex. So long as the <select> is not set to muliple, though, those are equivalent.

Sorry. Didn't read your code. When I got back to this thread it had a lot of posts that just looked above esthera's knowledge of js so just gave him code. Had I read it I would have said :

Esthera, use Old Pedant's code in post #7.

And yes we both had the same code. How often does that happen?

[Old Pedant]

Actually, seeing the difference between our two is instructive, I think. We were, indeed, almost the same. But knowing that you can either set the <option> to selected or set the selectedIndex to match the desired <option> is good to have in your coding arsenal. (And knowing that you must use selected if you want to set multiple <option>s in a <select multiple> is also good to know. And and and.. The more you know, the better.)