Drop Down Boxes

Drop Down Box

For Example...

<select id="fruits">
   <option value="Banana">Banana</option>
   <option value="orange">orange</option>
   //Use 'selected' to create a default start value
   <option value="Apple" selected>Apple</option>
   <option value="PEAR">PEAR</option>
   <option value="leMON">leMON</option>
</select>


In my demo (in the right pane) every time you change the option in the drop down it will display a message.
For this I am implementing the onchange event and calling my function (called mySwitch) on the <select id="fruits"> line as follows:

<select id="fruits" onchange="mySwitch('fruits', 'switchId')">

See the code on my form for more

A quick demo...

I am using various upper/lower case in my dropdown box and checking just for lowercase in my code that uses the 'switch' statement.

Select One: Banana orange Apple PEAR leMON





Note...
You cannot use this box and allow the user to enter new text
they can only select one from the list that has already been created.
Apparently a common way to get round this is to have an 'OTHER' option (placed at the top of the list) which, when chosen, can make visible a hidden text box where the user can then enter the new field they want added to the box.
You can then add the new option to your list...Upon a search for
'HTML select form with option to enter custom value'
there are some suggestions of what people have done but I wont go in to it now.