Измените содержимое поля выбора на основе другого поля выбора с помощью javascript

Question

Как изменить содержимое поля выбора 2 в зависимости от значения первого окна выбора. нет jQuery, но только JavaScript разрешает использование второго окна выбора на основе различных входных данных из 1-го блока выбора (div2) только JavaScript без jQuery нет внутреннего HTML, если используется переключатель.

<script> //javascript 
    function showHide(elem) { 
     if(elem.selectedIndex != 0) { 
      //hide the divs 
      for(var i=0; i < divsO.length; i++) { 
       divsO[i].style.display = 'none'; 

      } 
      //unhide the selected div 
      document.getElementById('div'+elem.value).style.display = 'block'; 


     } 
    } 



    window.onload=function() { 
     //get the divs to show/hide 
     divsO = document.getElementById("details").getElementsByTagName('div'); 
     disO = document.getElementById("details").getElementsByTagName('di'); 
    } 

</script> 

<div id="div2"> //select boxes 
    <select size="1" id="rambo" name="comm-name" selected="selected" onchange="showhide(this)" > 
     <option value="" selected="selected">-Select Office-</option> 
     <option value="3">HEAD OFFICE</option><option value="4">REGIONAL OFFICE</option> 
     <option value="5">DIVISIONAL OFFICE</option><option value="6">BRANCH OFFICE</option> 
     <option value="7">SERVICE CENTER</option><option value="8">EXTENSION COUNTER</option> 
     <option value="9">Show div 9</option><option value="10">Show div 10</option> 
     <option value="11">Show div 11</option><option value="12">Show div 12</option> 
     <option value="13">Show div 13</option><option value="14">Show div 14</option> 
     <option value="15">Show div 15</option><option value="16">Show div 16</option> 
     <option value="17">Show div 17</option><option value="17">Show div 18</option> 
     <option value="19">Show div 19</option><option value="18">Show div 20</option> 
     <option value="21">Show div 21</option> 
    </select> 
</div> 
<div id="di21"> <select name="" > 
     <option value="">Select an option</option> 
     <option value="4">Show div 4</option> 
     <option value="5">Show div 5</option> 
     <option value="6">Show div 6</option> 
    </select>This </div> 
     ..... so on 

// И это требует от меня повторного добавления контекста для объяснения кода. Я не знаю, что делать?
// функция JavaScript выше открывает новый флажок выбора при каждом изменении параметра в первом поле выбора.

Answer 1

Вот Fidle

Я упростил свой HTML только для целей тестирования и функции SetSel(elem) вы всегда можете написать собственный код, чтобы выбрать второе значение комбо в соответствии с логикой