How to Display a Submenu Over a Dropdownlist in JavaScript

Using an HTML table and JavaScript, you can create a submenu over a drop-down list control in your Web forms. The submenu displays links to other pages on your website, so the user can navigate to another page before selecting a value in the drop-down list. JavaScript uses the table's "id" attributes to write the links to the submenu. You use this attribute property to dynamically add submenu items to the table to display values when the page opens in the browser.

Instructions

1. Open your preferred HTML editor and open the HTML page you want to edit with the JavaScript code.

2. Create the table of elements above the drop-down list. You can set up a table that has default settings or leave the table elements blank with only the JavaScript code to populate the data. The following code creates two menu items:

   <table><tr>
   <td id="firstitem"> </td> <td id="seconditem"> </td>
   </tr></table>

3. Add the JavaScript code that adds the menu items to the table elements. The following code adds "Item1" and "Item2" to the submenu:

   var item1 = getElementById("firstitem");
   item1.innerHTML = "<a href='page1.php'>Item 1</a>";
   var item2 = getElementById("seconditem");
   item2.innerHTML = "<a href='page2.php'>Item 2</a>";

   Replace the linked pages and the text with your own.

4. Save the changes and open the page in your browser to test the new code. Click the links in the submenu to verify that they work properly.

References

• Microsoft: Creating a JavaScript Drop-Down Menu in FrontPage