MooTools 1.3 Cookbook

Adding a select box to the HTML DOM

Adding a SELECT box to the DOM can be tricky, but MooTools gives us the ability to make it look easy. This example will help us solve the common problem of a secondary SELECT menu upon modification of a first.

Getting ready

In our example, we ready ourselves by knowing the subordinate data to the first SELECT element's options. In a real-world usage, it is likely we would Ajax in the secondary data. If the planned use of the recipe includes Ajaxing in the secondary data, be sure to prepare the server-side script that returns the HTML before beginning.

How to do it...

Use a primary SELECT drop-down menu to dynamically create a secondary SELECT drop down:

<form action="javascript:" method="get" id="my_form"> <div ...