Combo Box / Dropdown

Topic

How to create a drop down box?
How to make a value selected in combobox?
How to create a multiple option select box?

Explanation

Combo box / Dropdown box


Example Code:


<form name=myform>
<select name=mytextarea>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
</select>
</form>

Result:



Definition:


Here we define the drop down box using "select" and "option" tags. The select box is defined using the tag "select". The number of options in the combobox is defined by using the "option" tag. As shown in the example we have given users three option to select from. The name to be shown for the option is given inbetween "option" tags.

Scrollable Select Option


The size of the select option can be defined using the attribute "size" inside "select" tag.

Example Code:


<form name=myform>
<select name=mytextarea size=2>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
<option name=four value=four> four </option>
</select>
</form>

Result:



Multi Select Option


We can give the option for users to select multiple options using the entity "multiple". So user can select multiple options by using "shift" or "Ctrl" keys.

Example Code:


<form name=myform>
<select name=mytextarea size=3 multiple>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three> three </option>
<option name=four value=four> four </option>
</select>
</form>

Result:



Preselected Select Option


The options can be preselected using the entity "selected".

Example Code:


<form name=myform >
<select name=mytextarea size=2>
<option name=one value=one> one </option>
<option name=two value=two> two </option>
<option name=three value=three selected> three </option>
<option name=four value=four> four </option>
</select>
</form>

Result: