Manipulating a Selectbox's Options en masse
Gabriel.
selectbox is identical to the rest and has roughly 1000 options.
The previous developer on the page is creating the page by writing out
the html code for each selectbox. This is pretty rediculous and I'm
redoing it so that each selectbox is pulling from the same list of
options.
I would like to be able to do something like this:
document.forms['x'].box1.options = new Array(new
Option('text','value'), new Option('text','value'), ...);
but I simply get an error of "not supported" when I try this. I've
also tried 'new Object' instead of Array, but with the same results.
So the current code has 1000 lines of this (info pulled from a db and
written to JS):
document.forms['x'].box1.options[i++] = new Option('text','value');
which is pretty lame. I could also put the entries into an array then
iterate through it assigning each individual option its text and
value, but that's just as much kludge as the above option, since the
whole point is to not have to iterate through.
My question is, how do I simply assign a selectbox its entire list of
options? can it be done?
Michael Winter
> I have a gigantic form that has a couple dozen select boxes. Each
> selectbox is identical to the rest and has roughly 1000 options.
>
> The previous developer on the page is creating the page by writing out
> the html code for each selectbox. This is pretty rediculous and I'm
> redoing it so that each selectbox is pulling from the same list of
> options.
[snip]
> My question is, how do I simply assign a selectbox its entire list of
> options? can it be done?
It can be done, but don't do it on the client.
This, I assume, is something that *must* happen. That is, the form is next
to useless without values in the SELECT elements. If this is the case, the
only reliable way is to generate the HTML on the server.
Mike
--
Michael Winter
M.Wi...@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
ded
>
> I have a gigantic form that has a couple dozen select boxes. Each
> selectbox is identical to the rest and has roughly 1000 options.
>
> written to JS):
>
> document.forms['x'].box1.options[i++] = new Option('text','value');
Yes, I think this is the only way to do this. An improvement is to use a
function that does this tasks:
// s may be for example document.forms['x'].box1
function assign_options(s) {
// Just in case
s.options.length = 0;
// Assign options
s.options[s.options.length] = new Option('t0', 'v0');
s.options[s.options.length] = new Option('t1', 'v1');
s.options[s.options.length] = new Option('t2', 'v2');
// etc...
}
Then, I can call this function for each select.
I have another problem : if I have n>1 select and 1000 options per
select, it allocates 1000 x n Option objects into memory.
Javascript uses references. Therefore, I thought that it would be
possible to allocate only once 1000 Options, and use references for all
selects. But, what happens is that when I fill the second select, it
empties the first one and so on...
Does somebody knows why each Option of a document can not be a reference
to another one ???
Thanks for help
Vianney
--
When choosing between two evils, I always like to try the one I've
never tried before. -- Mae West
ded
>
> I have a gigantic form that has a couple dozen select boxes. Each
> selectbox is identical to the rest and has roughly 1000 options.
>
> written to JS):
>
> document.forms['x'].box1.options[i++] = new
Option('text','value');
Yes, I think this is the only way to do this. An improvement is to use a
Thomas 'PointedEars' Lahn
> I have a gigantic form that has a couple dozen select boxes. Each
> selectbox is identical to the rest and has roughly 1000 options.
Oh my. For usability's sake, split it into several forms in different
documents. Implement a "next page" and "previous page" feature, and
preserve the previous data with using session management (cookies or
server session files).
> The previous developer on the page is creating the page by writing out
> the html code for each selectbox. This is pretty rediculous and I'm
> redoing it so that each selectbox is pulling from the same list of
> options.
>
> I would like to be able to do something like this:
>
> document.forms['x'].box1.options = new Array(new
> Option('text','value'), new Option('text','value'), ...);
>
> but I simply get an error of "not supported" when I try this. I've
> also tried 'new Object' instead of Array, but with the same results.
This error is based on a common misconception. "options" refers
to a DOM object, a collection, not an Array object. Those two
object prototypes are similar, but not identical.
> So the current code has 1000 lines of this (info pulled from a db and
> written to JS):
>
> document.forms['x'].box1.options[i++] = new Option('text','value');
>
> which is pretty lame. [...]
It is, indeed. You can define arrays of objects to contain the data:
var myOptions = [
{name: "box1",
options: [
{value: "foo", text: "bar"},
{value: "...", text: "..."}
]
},
{name: "box2",
options: [
...
]
},
...
];
(If the array initializer "[...]" is not supported, use "new Array(...)"
instead. The object initializer "{...}" should be supported, if not, you
cannot use Object objects but need to define a new prototype or use Array
objects only [gets a bit complicated then]).
Then iterate through the arrays, while using the object's property values
for building the collection. You will require the standards conforming
syntax, using the elements collection and bracket property accessors, for
this. Quickhack:
var e = document.forms["x"].elements;
for (var i = 0, len = myOptions.length, o = null, j, len2, o2 = null;
i < len;
i++)
{
o = e[myOptions[i].name];
for (j = 0, len2 = myOptions[i].options.length;
j < len2;
j++)
{
o2 = myOptions.options[j];
o.options[o.options.length] = new Option(o2.text, o2.value);
}
}
HTH
PointedEars