Javascript-форум - Связанные выпадающие списки

Добрый день,
я в web новичок, так что не стреляйте в пианиста - играю как умею. :)

есть у меня задача: связать два списка так, чтобы при изменении одного, автоматически менялось значение другого и наоборот. Я попробовал передвать через onchange в функцию changeBackgroundColor два значения: id элемента и цвет А затем менять фон в обоих элементах - сначала в одном, затем во втором.

И для первого выпадающего списка срабатывает, а вот вотрой игнорирует - значение для самого списка меняет, а вот связанный с ним список игнорирует.

<script>
  function changeBackgroundColor(id, newColor) {
    var elem = document.getElementById(id);
    elem.style.color = newColor;
    elem.style.backgroundColor = newColor;

  switch(id) {
    case 'Button1':  // if (id === 'Button1')
      var id2 = id + '_1';
      var elem2 = document.getElementById(id2);
      elem2.style.color = newColor;
      elem2.style.backgroundColor = newColor;
      alert("Id= "+id);

    case 'Button1_1':  // if (id === 'Button1_1')
      var id2 = id - '_1';
      var elem2 = document.getElementById(id2);
      elem2.style.color = newColor;
      elem2.style.backgroundColor = newColor;
      alert("Id= "+id);
  }
  }
</script>

<select class="apply_text1" size="1" name="Button1" id="Button1" onchange="changeBackgroundColor(id, value);">
<option value="white">NEW</option>
<option value="brown">A4</option>
<option value="red">A3</option>
<option value="orange">A2</option>
<option value="yellow">A1</option>
<option value="lime">N</option>
<option value="aqua">B1</option>
<option value="blue">B2</option>
<option value="navy">B3</option>
<option value="purple">B4</option>
<option value="black">NOT NEEDED</option>
</select>

<select class="apply_text2" size="1" name="Button1_1" id="Button1_1" onchange="changeBackgroundColor(id, value);">
<option value="white">NEW</option>
<option value="brown">A4</option>
<option value="red">A3</option>
<option value="orange">A2</option>
<option value="yellow">A1</option>
<option value="lime">N</option>
<option value="aqua">B1</option>
<option value="blue">B2</option>
<option value="navy">B3</option>
<option value="purple">B4</option>
<option value="black">NOT NEEDED</option>
</select>

Подскажите, пожалуйста, что может быть не так?

<!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />  <style type='text/css'> </style> <script type='text/javascript'> function changeBackgroundColor(id, newColor) { var elem = document.getElementById(id); elem.style.color = newColor; elem.style.backgroundColor = newColor; switch(id) { case 'Button1': var id2 = id + '_1'; var elem2 = document.getElementById(id2); elem2.style.color = newColor; elem2.style.backgroundColor = newColor; alert("1 Id= "+id); break; case 'Button1_1': var id2 = id.split('_')[0]; var elem2 = document.getElementById(id2); elem2.style.color = newColor; elem2.style.backgroundColor = newColor; alert("2 Id= "+id2); break; }; }; </script> </script> </head> <body> <select class="apply_text1" size="1" name="Button1" id="Button1" onchange="changeBackgroundColor(id, value);"> <option value="white">NEW</option> <option value="brown">A4</option> <option value="red">A3</option> <option value="orange">A2</option> <option value="yellow">A1</option> <option value="lime">N</option> <option value="aqua">B1</option> <option value="blue">B2</option> <option value="navy">B3</option> <option value="purple">B4</option> <option value="black">NOT NEEDED</option> </select> <select class="apply_text2" size="1" name="Button1_1" id="Button1_1" onchange="changeBackgroundColor(id, value);"> <option value="white">NEW</option> <option value="brown">A4</option> <option value="red">A3</option> <option value="orange">A2</option> <option value="yellow">A1</option> <option value="lime">N</option> <option value="aqua">B1</option> <option value="blue">B2</option> <option value="navy">B3</option> <option value="purple">B4</option> <option value="black">NOT NEEDED</option> </select> </body> </html>