selecting an option from a select

[SGershon]

Hi!

Since the first questions I asked here, I continue to drop by and read
some topics here and there, I like the replies very much.

I have today another question, I don't seem to find it on the FAQ
(please point me if its there):

I have two selects, one written 'directly on the page' and a second
written dinamically by JavaScript. (Actually, both are written by php
using data from a DB).

One is dependable of the other, and I am using the code of DevArticles
to make them depend:
http://tinyurl.com/df6vf

The Question: Now, I want to select the selected option of both inputs,
after the page is loaded.
How can I make the right option selected, based on the value of it?

I know the id and the value of each <OPTION>, but I do not know the
position of the <OPTION> inside the <SELECT>. So I guess I can not use
something like document.form.selectinput.options[1].selected, unless I
iterate through all the options. If this is the way to do it, how is
the iteration to be done?

I hope you can help me on this, and thank you for all the times you
helped me on the past!

SGershon

[SGershon]

Hi again!
Maybe someone can point me why this wont work to solve the above
problem/question?

function setDefault()
{
for (var i=0 ; i<document.theForm.theSelect.length ; i++)
{
if (document.theForm.theSelect.options[i].value == optVal)
{
document.theForm.theSelect.options[i].selected=true
}
}
}

Thanks!
SGershon

[RobB]

SGershon wrote:

Hi again!
Maybe someone can point me why this wont work to solve the above
problem/question?

function setDefault()
{
for (var i=0 ; i<document.theForm.theSelect.length ; i++)
{
if (document.theForm.theSelect.options[i].value == optVal)
{
document.theForm.theSelect.options[i].selected=true
}
}
}

Thanks!
SGershon

Probably because: you're not calling it onload.

function setDefault(val)
{
var f, s, i = 0;
if ((f = document.theForm)
&& (s = f.elements.theSelect))
{
for (var l = s.options.length; i < l; i++)
{
if (s.options[i].value == val)
{
s.options[i].selected = true;
return;
}
}
}
}

window.onload = function()
{
setDefault('foo');
}

[SGershon]

No, it was some stupid typo on the code on the page.

Thanks for the hint, RobB... I am calling it on the end of the page,
inside a <script></script> tag... I guess is more clean/elegant to use
the onLoad event. What are the practical differences?

[RobB]

SGershon wrote:

No, it was some stupid typo on the code on the page.

Thanks for the hint, RobB... I am calling it on the end of the page,
inside a <script></script> tag... I guess is more clean/elegant to use the onLoad event. What are the practical differences?

Helps you keep your 'behavioral layer' separate from that other
rubbish:

http://www.alistapart.com/articles/scripttriggers/

Also, manipulating elements onload gives them an extra bit of time to
'set up', the absence of which is sometimes a source of some
verdrießlichkeit, if you know what I mean. Just remember,
window.onload is an object property & will be over-written if you
assign to it more than once...unless, of course, you use W3C DOM
addEventListener() or MSIE attachEvent(), or 'bundle' multiple handlers
in a wrapper function.

[RobG]

SGershon wrote:

No, it was some stupid typo on the code on the page.

Thanks for the hint, RobB... I am calling it on the end of the page,
inside a <script></script> tag... I guess is more clean/elegant to use
the onLoad event. What are the practical differences?

The other side of the coin is that using onload with a heavy page can
cause an unacceptable lag in a script executing where visible page
elements are being modified.

Say you have something small to do a the top of the page that you'd
prefer happened without being noticed. Inserting a function just
after the element concerned can allow it to happen much sooner (and
less perceptibly) than if the browser waits for onload.

But that would be the exception rather than the rule.

--
Rob