# Create a tree menu in webMathematica

**URL:** <https://community.wolfram.com/t/create-a-tree-menu-in-webmathematica/16168>\
**Category:** Questions\
**Tags:** software-development, mathematica, interface-construction, ui-ux-and-ide\
**Created:** [June 9, 2020, 7:14am UTC](https://community.wolfram.com/t/create-a-tree-menu-in-webmathematica/16168 "2020-06-09T07:14:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![guillermo](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/guillermo/32/16702_2.png) [@guillermo](https://community.wolfram.com/u/guillermo)\
**Post date:** [June 9, 2020, 7:14am UTC](https://community.wolfram.com/t/create-a-tree-menu-in-webmathematica/16168/1 "2020-06-09T07:14:09Z")

</div>

At present I have in webMathematica a Menu like this:

I have only a box where the user can choose {“A1”, “A2”, “B1”, “B2”, “B3”,“C1”,“C2” }  
I apply the following syntax  
msp:evaluate  
HTMLSelect[{“A1”, “A2”, “B1”, “B2”, “B3”,“C1”,“C2” }, {“av1”,“av2”, “bv1”, “bv2”,“bv3”, “cv1”, “cv2”}}, “lambda”, SelectedValues → {$$lambda}]  
\</msp:evaluate\>

I will prefer to divide the above box in two boxes

Box1-\> The user can choose {A or B or C}  
Box2-\> If in Box1 it is chosen A, then it shows {A1, A2}, If it is chosen B, then it shows {B1,B2, B3}, If it is chosen C, then it shows {C1,C2},

How can it be done?

Guillermo

---

<div class="post-metadata">

**Author:** ![hmichel](https://yyz1.discourse-cdn.com/wolfram/user_avatar/community.wolfram.com/hmichel/32/31351_2.png) [@hmichel](https://community.wolfram.com/u/hmichel)\
**Post date:** [June 13, 2020, 5:33am UTC](https://community.wolfram.com/t/create-a-tree-menu-in-webmathematica/16168/2 "2020-06-13T05:33:12Z")

</div>

I am a bit confused, but the word “tree” in the title. The following is a rudimentary stab at a path keeping with the webMathematica HTMLSelect.

 ![Test4.png](https://global.discourse-cdn.com/wolfram/original/2X/1/169f0c11ffafe06aef8cffde90ee8c6c73004682.png)

This solution involved a bit of javascript on the client side. At each change of the top select drop down box we resubmit the form by triggering a click of the “Evaluate” button.

```
<%@ page language="java" %>
<%@ taglib uri="/webMathematica-taglib" prefix="msp" %>
<html>
<body>
<form name="drps" action="Test4.jsp" method="post" accept-charset="utf-8">
<table>
<tbody>
<tr>
<td>Select an option:</td><td> </td>
</tr>
<tr>
<td>
<msp:evaluate>
HTMLSelect[{"A","B","C"},{"OptionA","OptionB","OptionC"}, "drops", SelectedValues -> {$$drops}]
</msp:evaluate>
</td><td> </td><td> </td>
</tr>
<tr>
<td> </td>
<td>
<msp:evaluate>
Which[
$$drops == "OptionA",
HTMLSelect[{"A1","A2","A3"},{"OptionA1","OptionA2","OptionA3"}, "level2", SelectedValues -> {$$level2}],
$$drops == "OptionB",
HTMLSelect[{"B1","B2","B3"},{"OptionB1","OptionB2","OptionB3"}, "level2", SelectedValues -> {$$level2}],
$$drops == "OptionC",
HTMLSelect[{"C1","C2","C3"},{"OptionC1","OptionC2","OptionC3"}, "level2", SelectedValues -> {$$level2}]
]
</msp:evaluate>
</td><td> </td>
</tr>
<tr>
</tbody>
</table>

<input type="submit" name="btnSubmit" id="btnSubmit" value="Evaluate" /> 
</form>
<msp:evaluate>
MSPBlock[$$drops, $$drops]
</msp:evaluate>
<msp:evaluate>
MSPBlock[$$level2, $$level2]
</msp:evaluate>
<script type="text/javascript">
//<![CDATA[

document.getElementsByName('drops')[0].addEventListener('change', function() {
document.getElementById('btnSubmit').click();
  //console.log('You selected: ', this.value);
});

//]]>

</script>
</body>
</html>

```

I would highly recommend making your own function that injects custom HTML into the stream. The built-in function work well for simple cases, but if you are looking to build fancier interfaces it would be best to make your own function.