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">
<!--
var table = '';

for (j = 1; j < 7; j++)
{
      table += '<tr>';
      table += '<td><select id="MasterSelectA0' + j+1 + '"><option>red</option><option>green</option><option>yellow</option></select></td>';
      table += '<td><select id="MasterSelectB0' + j+1 + '"><option>apples</option><option>oranges</option><option>grapes</option></select></td>';
      table += '</tr>';
}

document.write(table);

//-->
</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
LVL 16
ellandrdAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

TimYatesCommented:
<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">
<!--
var table = '';

for (j = 1; j < 7; j++)
{
     table += '<tr>';
     table += '<td><select id="MasterSelectA' + j + '"><option>red</option><option>green</option><option>yellow</option></select></td>';
     table += '<td><select id="MasterSelectB' + j +

'"><option>apples</option><option>oranges</option><option>grapes</option></select></td>';
     table += '</tr>';
}

document.write(table);

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

Like that?
0
TimYatesCommented:
Basically, I changed your 2 methods to:

     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++ ;
          }
     }

And your generation loop to:

for (j = 1; j < 7; j++)
{
     table += '<tr>';
     table += '<td><select id="MasterSelectA' + j + '"><option>red</option><option>green</option><option>yellow</option></select></td>';
     table += '<td><select id="MasterSelectB' + j + '"><option>apples</option><option>oranges</option><option>grapes</option></select></td>';
     table += '</tr>';
}

Hope you see why it works now :-)

Tim
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
ellandrdAuthor Commented:
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!
0
ellandrdAuthor Commented:
having a problem resetting the select boxes on load...

http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21806583.html
0
TimYatesCommented:
>> 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
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.