f



How to reference one combo box from another combo box

Hello,
I have an HTML file that contains a form with 2 selection list (combo
box). The first combobox 'onchange' function, addColor(),adds a new
color to the second combobox. I have half of the function build, but
im missing the how to reference one combobox from another combobox.
I've tried using the getElementById with no success.



This is how the form with the 2 combobox looks like:

<form>
   <select name="cars" size="1" onchange="addColor(???)">
   <option value="Volvo">Volvo</option>
   <option value="Mercedes">Mercedes</option>
   <option value="BMW" selected="selected">BMW</option>
   <option value="Audi">Audi</option>

   </select>
   <select name='colors' size='1'>
   <option value='red' selected="selected">red</option>
   <option value='blueblue'>blue</option>
   <option value='black'>black</option>
   <option value='yellow'>yellow</option>
   </select>
</form>



This is the 'onchange' function that adds a new color to the second
combo box
function addColor(???)
{
   ......

   for (var i=0; i<album.length; i++) //loop through the array
   {
      var newOpt = document.createElement('option');
      newOpt.setAttribute('value', i);
      if (!i) { newOpt.setAttribute('selected', 'selected'); } //if
first element, add extra attribute to <newOpt>

      ???.appendChild(newOpt); //??? doesnt work, coz reference is
wrong

      newOptValue = document.createTextNode(album(i));
      newOpt.appendChild(newOptValue)
   }
}


How do i achieve this?

Thanks
Marco

0
4/28/2007 4:35:32 AM
comp.lang.javascript 38370 articles. 2 followers. javascript4 (1315) is leader. Post Follow

2 Replies
614 Views

Similar Articles

[PageSpeed] 18

SM wrote:
> <form>
>    <select name="cars" size="1" onchange="addColor(this.form.colors)">...
>    </select>
>    <select name='colors' size='1'>...
>    </select>
> </form>
>

> function addColor(sel)
> {
>    ......
>
>    for (var i=0; i<album.length; i++) //loop through the array
>    {
>       var newOpt = document.createElement('option');
>       newOpt.setAttribute('value', i);
>       if (!i) { newOpt.setAttribute('selected', 'selected'); } //if
> first element, add extra attribute to <newOpt>
>
>      sel.appendChild(newOpt); //??? doesnt work, coz reference is
> wrong
>
>       newOptValue = document.createTextNode(album(i));
>       newOpt.appendChild(newOptValue)
>    }
> }


^^ code

0
scripts
4/28/2007 6:06:42 AM
On Apr 28, 2:06 am, "scripts.contact" <scripts.cont...@gmail.com>
wrote:
> SM wrote:
> > <form>
> >    <select name="cars" size="1" onchange="addColor(this.form.colors)">...
> >    </select>
> >    <select name='colors' size='1'>...
> >    </select>
> > </form>
>
> > function addColor(sel)
> > {
> >    ......
>
> >    for (var i=0; i<album.length; i++) //loop through the array
> >    {
> >       var newOpt = document.createElement('option');
> >       newOpt.setAttribute('value', i);
> >       if (!i) { newOpt.setAttribute('selected', 'selected'); } //if
> > first element, add extra attribute to <newOpt>
>
> >      sel.appendChild(newOpt); //??? doesnt work, coz reference is
> > wrong
>
> >       newOptValue = document.createTextNode(album(i));
> >       newOpt.appendChild(newOptValue)
> >    }
> > }
>
> ^^ code

Thanks, works like a charm

Marco

0
SM
4/28/2007 4:49:46 PM
Reply: