0

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.

bgs
  • 3,061
  • 7
  • 40
  • 58
Meet
  • 1
  • 2
  • possible duplicate of [How to change "selected" value in combobox using JavaScript?](http://stackoverflow.com/questions/1778184/how-to-change-selected-value-in-combobox-using-javascript) – Rizstien Dec 26 '13 at 07:20
  • dont want to link two combo boxes to change valuesbased on each other. but only second changes based on the first one, wihout opening a new select box. – Meet Dec 26 '13 at 07:25
  • the answer of mentioned question shows the value change of second combo based on 1st combo value when 1st combo value change. yes we can write the desired mapping in function – Rizstien Dec 26 '13 at 07:30
  • the code provided above is opening up a new (2nd)select box each time the option in the first one is changed. I want to have one select box and then change the values in the 2nd select box corresponding to the selection made in first. – Meet Dec 26 '13 at 07:34
  • if i remove the 'div' from 1st select box it works fine... but i cant do that as the first select box itself is visible after input from a radio button. i hope i am clear enough ! – Meet Dec 26 '13 at 07:36
  • HOPE THIS EXAMPLE HELPS YOU : http://www.dyn-web.com/tutorials/forms/select/paired.php – always-a-learner Jan 07 '17 at 08:34

1 Answers1

0

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

Rizstien
  • 802
  • 1
  • 8
  • 23
  • do not take me wrong..i mean no offence but you seem in hurry... this fidle does not solve my purpose... – Meet Dec 26 '13 at 08:54