Determining/Setting Option based on it's value?

[RobG]

I have a SELECT box with a big option list... with the value being the
primary key of a database query.

I want to be able to re-select the value in this select box based on a
new PK passed via Javascript, and I'm wondering if that's possible.
This doesn't appear to work:

function updateCRselect(fieldname, newvalue)
{
var element = document.getElementById(fieldname);
element.options[element.selectedIndex].value = newvalue;

}

My other guess is to somehow determine the option's own index value
based on the value of "newvalue" and then set it, but I don't know how
to do that.

Any suggestions?

Thanks!

Rob

 

[Thomas 'PointedEars' Lahn]

I have a SELECT box with a big option list... with the value being the
primary key of a database query.

I want to be able to re-select the value in this select box based on a
new PK passed via Javascript, and I'm wondering if that's possible.
This doesn't appear to work:

function updateCRselect(fieldname, newvalue)
{
var element = document.getElementById(fieldname);
element.options[element.selectedIndex].value = newvalue;

}

I am afraid your code does not match your explanation. I do not see any
re-selecting; you would be overwriting the first currently selected option,
if there is one (otherwise you get a runtime error). Besides, it should
suffice to refer to the control with `document.forms[...].elements[...]',
`this' or `this.form.elements[...]' respectively; that would be more
compatible and maybe also more efficient (D::gEBI searches the whole document).

My other guess is to somehow determine the option's own index value
based on the value of "newvalue" and then set it, but I don't know how
to do that.

Any suggestions?

While the usual iteration over element.options using element.options.length
is certainly possible, it would be more efficient -- especially with "a big
option list" and a "primary key" which would have to be unique -- to use an
Object object as a dictionary, with the primary key as property name and
property values that indicate the index of the option. (The code would
probably have to be generated server-side, of course.) There is one catch
to this approach, though: the primary key value must not match the name of
an existing property of Object objects as inherited from Object.prototype or
the whole thing could break.


HTH

PointedEars

 

[Thomas 'PointedEars' Lahn]

Search the options:

for ( var i = 0; i < element.options.length; ++i )
{
if ( element.options[ i ].value == newvalue )
{
element.selectedIndex = i;
break;
}
}

var opts = element.options;
for (var i = opts.length; i--
{
if (opts.value == newvalue)
{
element.selectedIndex = i;
break;
}
}

Or use an Object object as a dictionary, as I suggested. That may be built
client-side once as well:

var dict = new Object();

for (var i = element.options.length; i--
{
var o = element.options;
dict[o.value] = i;
}

And later:

element.selectedIndex = dict[newvalue];

IIRC I've also seen:

element.value = newvlaue;

work, but I can't remember which browsers it worked on.

The problem with that is that it works differently in the MSHTML DOM and the
Gecko/W3C DOM. Search the archives.

Rob.

There must be a nest somewhere ;-)


SCNR

PointedEars