locked
VB/HTML - Adding a submenu to a drop down menu RRS feed

  • Question

  • Hi, I want to create a submenu within my existing drop down menu for one option. For example if Choice2 is selected I want another menu to expanded with another 5 options. I am currently working on a HTA front end written in VB Script and HTML.

    Any help in archiving this would be greatly appreciated.

     

    Code snippet of what I have already is below...

     

     

    
    <SCRIPT language=vbscript>


    Sub GetOSImageName
    ' Attempts to get the desired operating system image namee based on selection from the user interface.
    If Not OperatingSystemSelector.Value = "UNKNOWN" Then
    strOSImage = OperatingSystemSelector.Value
    Else
    strOSImage = ""
    End If
    End Sub

    </SCRIPT>




    <HTML>



    <SELECT style="WIDTH: 323px" onchange=GetOSImageName
    size=1 name=OperatingSystemSelector>
    <OPTION selected value=UNKNOWN>(please select deployment type)</OPTION>
    <OPTION value=Choice1>Choice1</OPTION>
    <OPTION value=Choice2>Choice2</OPTION>
    <OPTION value=Choice3>Choice3</OPTION>
    <OPTION value=Choice4>Choice4</OPTION>
    </SELECT>

    </HTML>

     

     

    Thursday, August 5, 2010 12:53 PM

Answers

  • Here's one way I can think of ...

    <HTML>

    <SCRIPT language=vbscript>

    Sub GetOSImageName

    ' Attempts to get the desired operating system image namee based on selection from the user interface.

    If Not OperatingSystemSelector.Value = "UNKNOWN" Then
        strOSImage = OperatingSystemSelector.Value
        if strOSImage = "Choice2" then OperatingSystemSelectorLvl2.style.visibility = "visible"
    Else
        strOSImage = ""
    End If

    End Sub

    </SCRIPT>
    <body>

    <SELECT style="WIDTH: 323px" onchange=GetOSImageName
             size=1 name=OperatingSystemSelector>
                <OPTION selected value=UNKNOWN>(please select deployment type)</OPTION>
                <OPTION value=Choice1>Choice1</OPTION>
                <OPTION value=Choice2>Choice2</OPTION>
                <OPTION value=Choice3>Choice3</OPTION>
                <OPTION value=Choice4>Choice4</OPTION>
    </SELECT>

    <SELECT style="WIDTH: 323px;visibility:hidden "
             size=1 name=OperatingSystemSelectorLvL2>
                <OPTION selected value=UNKNOWN>(please select deployment type)</OPTION>
                <OPTION value=Choice21>Choice1</OPTION>
                <OPTION value=Choice22>Choice2</OPTION>
                <OPTION value=Choice23>Choice3</OPTION>
                <OPTION value=Choice24>Choice4</OPTION>
    </SELECT>
    </body>
    </HTML>

    I also posted a multi-level menubar approach for use in HTAs in the Repository: http://gallery.technet.microsoft.com/ScriptCenter/en-us/796bd584-0fdb-43bc-a5d2-aa5fc99a5e5d.  I think it is compatible with an HTML uses, too.


    Tom Lavedas
    • Marked as answer by PaulTown Friday, August 6, 2010 12:21 PM
    Thursday, August 5, 2010 5:12 PM
  • Here is another way. We use the Span tags and then imbed in the code the html control you want to display and when the time is right display it where ever the span tags are.

    <html>
    <head>
    <title>HTA Example</title>
    <HTA:APPLICATION
     APPLICATIONNAME="HTA Example"
     ID="HTAExample"
     VERSION="1.0"/>
    </head>
    
    <script language="VBScript">
    
    Sub GetOSImageName
    	If OperatingSystemSelector.Value = "Choice2" Then
    	 	NewSelector.innerHTML = "<select name=""Choice2"" id=""Choice2"" style=""WIDTH: 323px"" onchange=""NewChoice"">" & _
    					"<option value=""1"">1</option>" & _
    					"<option value=""2"">2</option>" & _
    					"<option value=""3"">3</option>" & _
    					"<option value=""4"">4</option>" & _
    				    "</select>"
      Else
      	MsgBox OperatingSystemSelector.value
      End If
    End Sub
    
    Sub NewChoice
    	MsgBox Choice2.Value
    End Sub
    
    </script>
    
    <body>
    	<SELECT style="WIDTH: 323px" onchange=GetOSImageName 
    	     size=1 name=OperatingSystemSelector> 
    	      <OPTION selected value=UNKNOWN>(please select deployment type)</OPTION> 
    	      <OPTION value=Choice1>Choice1</OPTION>
    	      <OPTION value=Choice2>Choice2</OPTION> 
    	      <OPTION value=Choice3>Choice3</OPTION>
    	      <OPTION value=Choice4>Choice4</OPTION>
    	</SELECT>
    	<p>
    	<span id="NewSelector"></span>
    </body>
    </html>

    v/r LikeToCode....Mark the best replies as answers.
    • Marked as answer by PaulTown Friday, August 6, 2010 12:21 PM
    Thursday, August 5, 2010 5:14 PM
  • Sure, just change the code to something like this ...

    Sub GetOSImageName

    ' Attempts to get the desired operating system image namee based on selection from the user interface.

    If Not OperatingSystemSelector.Value = "UNKNOWN" Then
        strOSImage = OperatingSystemSelector.Value
        if strOSImage = "Choice2" then
           OperatingSystemSelectorLvl2.style.visibility = "visible"
        else
           OperatingSystemSelectorLvl2.style.visibility = "hidden"
        end if
    Else
        strOSImage = ""
    End If

    End Sub


    Tom Lavedas
    • Marked as answer by PaulTown Friday, August 6, 2010 12:21 PM
    Friday, August 6, 2010 12:05 PM
  • And for the example I showed you just set this value:  NewSelector.innerHTML = ""
    v/r LikeToCode....Mark the best replies as answers.
    • Marked as answer by PaulTown Monday, August 9, 2010 10:39 AM
    Friday, August 6, 2010 1:31 PM

All replies

  • After thinking about about I don't think submenu's are going to work so have thought of something else...

    I'm going to added another option select menu but is there a way I can have this hidden, for instance, until choice2 is selected?

    Thursday, August 5, 2010 3:21 PM
  • Here's one way I can think of ...

    <HTML>

    <SCRIPT language=vbscript>

    Sub GetOSImageName

    ' Attempts to get the desired operating system image namee based on selection from the user interface.

    If Not OperatingSystemSelector.Value = "UNKNOWN" Then
        strOSImage = OperatingSystemSelector.Value
        if strOSImage = "Choice2" then OperatingSystemSelectorLvl2.style.visibility = "visible"
    Else
        strOSImage = ""
    End If

    End Sub

    </SCRIPT>
    <body>

    <SELECT style="WIDTH: 323px" onchange=GetOSImageName
             size=1 name=OperatingSystemSelector>
                <OPTION selected value=UNKNOWN>(please select deployment type)</OPTION>
                <OPTION value=Choice1>Choice1</OPTION>
                <OPTION value=Choice2>Choice2</OPTION>
                <OPTION value=Choice3>Choice3</OPTION>
                <OPTION value=Choice4>Choice4</OPTION>
    </SELECT>

    <SELECT style="WIDTH: 323px;visibility:hidden "
             size=1 name=OperatingSystemSelectorLvL2>
                <OPTION selected value=UNKNOWN>(please select deployment type)</OPTION>
                <OPTION value=Choice21>Choice1</OPTION>
                <OPTION value=Choice22>Choice2</OPTION>
                <OPTION value=Choice23>Choice3</OPTION>
                <OPTION value=Choice24>Choice4</OPTION>
    </SELECT>
    </body>
    </HTML>

    I also posted a multi-level menubar approach for use in HTAs in the Repository: http://gallery.technet.microsoft.com/ScriptCenter/en-us/796bd584-0fdb-43bc-a5d2-aa5fc99a5e5d.  I think it is compatible with an HTML uses, too.


    Tom Lavedas
    • Marked as answer by PaulTown Friday, August 6, 2010 12:21 PM
    Thursday, August 5, 2010 5:12 PM
  • Here is another way. We use the Span tags and then imbed in the code the html control you want to display and when the time is right display it where ever the span tags are.

    <html>
    <head>
    <title>HTA Example</title>
    <HTA:APPLICATION
     APPLICATIONNAME="HTA Example"
     ID="HTAExample"
     VERSION="1.0"/>
    </head>
    
    <script language="VBScript">
    
    Sub GetOSImageName
    	If OperatingSystemSelector.Value = "Choice2" Then
    	 	NewSelector.innerHTML = "<select name=""Choice2"" id=""Choice2"" style=""WIDTH: 323px"" onchange=""NewChoice"">" & _
    					"<option value=""1"">1</option>" & _
    					"<option value=""2"">2</option>" & _
    					"<option value=""3"">3</option>" & _
    					"<option value=""4"">4</option>" & _
    				    "</select>"
      Else
      	MsgBox OperatingSystemSelector.value
      End If
    End Sub
    
    Sub NewChoice
    	MsgBox Choice2.Value
    End Sub
    
    </script>
    
    <body>
    	<SELECT style="WIDTH: 323px" onchange=GetOSImageName 
    	     size=1 name=OperatingSystemSelector> 
    	      <OPTION selected value=UNKNOWN>(please select deployment type)</OPTION> 
    	      <OPTION value=Choice1>Choice1</OPTION>
    	      <OPTION value=Choice2>Choice2</OPTION> 
    	      <OPTION value=Choice3>Choice3</OPTION>
    	      <OPTION value=Choice4>Choice4</OPTION>
    	</SELECT>
    	<p>
    	<span id="NewSelector"></span>
    </body>
    </html>

    v/r LikeToCode....Mark the best replies as answers.
    • Marked as answer by PaulTown Friday, August 6, 2010 12:21 PM
    Thursday, August 5, 2010 5:14 PM
  • Thanks heaps to both of you! Both answers are exactly what I was looking for but with one minor exception. Is there a way for 2nd options to be re-hidden if, for example, "Choice2" was selected but then choose to go back to "Choice1"?

     

    Many thanks

    Friday, August 6, 2010 8:21 AM
  • Sure, just change the code to something like this ...

    Sub GetOSImageName

    ' Attempts to get the desired operating system image namee based on selection from the user interface.

    If Not OperatingSystemSelector.Value = "UNKNOWN" Then
        strOSImage = OperatingSystemSelector.Value
        if strOSImage = "Choice2" then
           OperatingSystemSelectorLvl2.style.visibility = "visible"
        else
           OperatingSystemSelectorLvl2.style.visibility = "hidden"
        end if
    Else
        strOSImage = ""
    End If

    End Sub


    Tom Lavedas
    • Marked as answer by PaulTown Friday, August 6, 2010 12:21 PM
    Friday, August 6, 2010 12:05 PM
  • And for the example I showed you just set this value:  NewSelector.innerHTML = ""
    v/r LikeToCode....Mark the best replies as answers.
    • Marked as answer by PaulTown Monday, August 9, 2010 10:39 AM
    Friday, August 6, 2010 1:31 PM
  • I ended up going with LikeToCode method but both answers work great. Thanks again to both off you!
    Monday, August 9, 2010 10:41 AM