Combo Box Drop Down

The first widget is the combo box drop down list, which allows the user input customized text or select pre-defined items from a drop down list. Try the following input field, click the right end of the text field, a drop down list with predefined choices will show up. If user input some customized text, and click the right end of the text field, this text will be added to the drop down list automatically.

This widget is especially useful if the developer wish to provide some pre-defined choices to the user and also want have the capability of allowing user to input customized text.

To apply this widget to the webpage, follow below steps:

a. Put the following into the head area, or you can put the code into a file and refer that file in the head area.

b. Create a text field, be sure it's id is unique in the page; add onClick="showComboBoxDropDown(event, document.getElementById('id of the select object will be created in step c'), this)". For the example shown above, the HTML code could be:

c. Create a div layer with style="position:absolute; z-index:1; left: 1px; top: 1px; border: solid black 0px; overflow: hidden; visibility: hidden;". Inside this div, create a drop down list, be sure it's id is unique also. For the select object, the value of options is not important. For the example shown above, the HTML code could be:

d. The combo box drop down list should work now. If the combo box drop down is submit to server, its value is just the value of the input text created in setp b.


Cool Drop Down

The second widget is just a cool replace of the normal "select". Click on the input text, it will changed to a drop down list.

To apply this widget to the webpage, follow below steps:

a. Put the following into the head area, or you can put the code into a file and refer that file in the head area.

b. Create a text field, be sure it's id is unique in the page; add onClick="showDropDown(event, document.getElementById('id of the select object will be created in step d'), this, document.getElementById('id of the hidden input will be created in step c'))". For the example shown above, the HTML code could be:

c. Create a hidden field, be sure it's id is unique. For the example shown above, the HTML code could be:

Create a div layer with style="position:absolute; z-index:1; left: 1px; top: 1px; border: solid black 0px; overflow: hidden; visibility: hidden;". Inside this div, create a drop down list, be sure it's id is unique also. For the example shown above, the HTML code could be:

d. The combo box drop down list should work now. If the drop down is submit to server, its value is the value of the hidden field created in setp c.

By Dehua Zhang, May 31, 2007.