asked on

2 columns of 7 select boxes

table made up of 2 columns and 7 rows.

each cell has a selectbox:

SelectBoxA0 | SelectBoxB0 <--- Master SelectBoxes
SelectBoxA1 | SelectBoxB1 <--- Slave SelectBoxes
SelectBoxA2 | SelectBoxB2 <-----------|
SelectBoxA3 | SelectBoxB3 <-----------|
SelectBoxA4 | SelectBoxB4 <-----------|
SelectBoxA5 | SelectBoxB5 <-----------|
SelectBoxA6 | SelectBoxB6 <-----------|
SelectBoxA7 | SelectBoxB7 <-----------|

what im trying to do, is if a user selects an option in either of the Master SelectBoxes, all the Slave SelectBoxes belong to that Master has there selectedIndex set the same as its Masters.

Example: I selected option 1, red in Master SelectBoxA0. When i do this, i want the selectedIndexes in the Slave SelectBoxes1..7 to be set to red. If i select green, all the slaves will get set to green

Same goes for Master SelectBoxB0...

Code:

<tr>
      <td><select id="MasterSelectA0" onchange="updateAllSlaveADropDowns( this.selectedIndex )">
            <option>red</option>
            <option>green</option>
            <option>yellow</option></select>
      </td>
      <td><select id="MasterSelectB0" onchange="updateAllSlaveBDropDowns( this.selectedIndex )">
            <option>apples</option>
            <option>oranges</option>
            <option>grapes</option></select>
      </td>
</tr>
<script type="text/javascript">

</script>

Javascript:

      function updateAllSlaveADropDowns( selected ) {
            var myform = document.forms[ 'myform' ] ;

            for ( var i = 0; i < myform.MasterSelectA0.length; i++ ) {
                  if ( myform.MasterSelectA0[ i ].selectedIndex != null ) {
                        myform.MasterSelectA0[ i ].selectedIndex = selected ;
                  }
            }
      }

      function updateAllSlaveBDropDowns( selected ) {
            var myform = document.forms[ 'myform' ] ;

            for ( var i = 0; i < myform.MasterSelectB0.length; i++ ) {
                  if ( myform.MasterSelectB0[ i ].selectedIndex != null ) {
                        myform.MasterSelectB0[ i ].selectedIndex = selected ;
                  }
            }
      }

But it dont work? and i see find the bug

TimYates

<HTML>
<HEAD>
<script type="text/javascript">

function updateAllSlaveADropDowns( selected ) {
var i = 1 ;
while( true )
{
var aSel = document.getElementById( 'MasterSelectA' + i ) ;
if( aSel )
aSel.selectedIndex = selected ;
else
break ;
i++ ;
}
}

function updateAllSlaveBDropDowns( selected ) {
var i = 1 ;
while( true )
{
var aSel = document.getElementById( 'MasterSelectB' + i ) ;
if( aSel )
aSel.selectedIndex = selected ;
else
break ;
i++ ;
}
}

</script>
</HEAD>
<BODY onload="window.location.hash='bookmark'">
<table>
<tr>
<td><select id="MasterSelectA0" onchange="updateAllSlaveADropDowns( this.selectedIndex )">
<option>red</option>
<option>green</option>
<option>yellow</option></select>
</td>
<td><select id="MasterSelectB0" onchange="updateAllSlaveBDropDowns( this.selectedIndex )">
<option>apples</option>
<option>oranges</option>
<option>grapes</option></select>
</td>
</tr>
<script type="text/javascript">

</script>
</table>
</BODY>
</HTML>

Like that?

ASKER CERTIFIED SOLUTION

TimYates

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ellandrd

ASKER

Kinda

Bit confused with your :

var i = 1 ;
while( true )
{
var aSel = document.getElementById( 'MasterSelectB' + i ) ;
if( aSel )
aSel.selectedIndex = selected ;
else
break ;
i++ ;
}

as im used to doing it the long way...

but thank you!

ellandrd

ASKER

having a problem resetting the select boxes on load...

https://www.experts-exchange.com/questions/21806583/reset-selectedIndexes.html

TimYates

>> Bit confused with your :

Ok. I'll try to explain :-)

1) i starts at 1
2) start loop forever
3) get the element with the id "MasterSelectB" + i (ie: MasterSelectB1, MasterSelectB2, etc)
4) if the element with theat id exists, then set the select edindex of it to the value of "selected"
5) else if it doesn't exist, break out of the loop (goto 8)
6) increment i by one ( i = i + 1 )
7) loop round again (goto 3)
8) loop has finished (break), so end function :-)

Tim