Synchronized Drop Menus

programming web dev
1

Hello everyone,

The objective of the code below is to create two synchronized instances of a single drop-menu. Though the code in “CreateMenu” works fine as-is, it does not work when put into a function to allow it to be used in two instances.

<html>
    <head></head>
    <body>
        <script language="javascript">
            function selectOption(boxNum,num)
            {
                var selObj = document.getElementById('m'+boxNum);
                selObj.selectedIndex = num;
            }
            
            function CreateMenu(menuName,menuID,affectTargetMenu)
            {
                document.write("<select name=" + menuName + " id=" + menuID + " onclick=selectOption(" + affectTargetMenu + 
                    ",this.selectedIndex);\">" +
                        "<option>Option-0</option>" +
                        "<option>Option-1</option>" +
                        "<option>Option-2</option>" +
                        "<option>Option-3</option>" +
                        "<option>Option-4</option>" +
                    "</select>");
            }
        </script>
        
        <h3>Choose one option at a time</h3>
        <form>
            <script language="javascript">
                CreateMenu("menu1","m1","2");
            </script>
        </form>
        
        <form>
            <script language="javascript">
                CreateMenu("menu2","m2","1");
            </script>
        </form>
    </body>
</html>

I have a feeling that I have made a very fundamental mistake (this.selectedIndex?), but I am unable to achieve a solution yet. Any help is appreciated.

Thank you.

  • HF