使用javascript根据另一个选择框更改选择框的内容

Question

How to change the contents of 2nd select box based on value of first select box. no jQuery but only JavaScript enable second select box based on various inputs from 1st select box(div2) only JavaScript no jQuery no inner HTML if switch used.

<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

//And this is asking me time and again to add some context to explain the code.. I do not know what to do ?
// the JavaScript function above opens up a new select box each time I change the option in the first select box.

Answer 1

Here is the Fidle

I simplified your html just for testing purpose and in function SetSel(elem) you can always write custom code to select second combo value as per logic