HTML dropdownmenu adding own value

Question

Is there any possibility to have a drop-down-menu where you can add an own value by typing it directly into the drop-down-field? The Idea is to have all rows in a database to be listet in this drop-down-menu and to have the posibility to add a new row. The php-File for saving all the Data is allready working. Rightnow my code for the drop-down-menu looks like this:

<select id="name" name="name" onChange="enableOther();" onFocus="enableOther()">
    <option> </option>
    <option>Neu</option>
    <?php
    while($row = mysql_fetch_object($ergebnis))     
{
    echo('<option>'.$row->Material.'</option>');
}
    ?>
</select>

i hope there is any solution for my problem...

Seems a duplicate of http://stackoverflow.com/questions/8180890/drop-down-with-free-input — Maria Ioannidou, Apr 23 '13 at 08:41
possible duplicate of [How can I create an editable combo box in HTML/Javascript?](http://stackoverflow.com/questions/3052130/how-can-i-create-an-editable-combo-box-in-html-javascript) — Quentin, Apr 23 '13 at 08:42
What do you want to do? Dynamically add new options ("by typing it directly into the drop-down-field") to the select input or read the options from the database? These are two completely different things. — Mike, Apr 23 '13 at 09:01

daiscog · Answer 1 · 2013-04-23T09:17:05.470

This isn't supported natively in HTML, but there are many JavaScript UI toolkits that provide an editable combo box widget, or you could try coding one in JS yourself (essentially, using a text input with a custom-coded drop-down list).

Alternatively, a simple approach would be something like this:

<select name="name" ...>
    <option value=''>Custom (use text field)</option>
    ... etc ...
</select>
<input type='text' name='customName'>

Then at the server side, if the submitted value of name is a blank string, but the submitted value of customName is not, use customName. You could also add JavaScript to enable/disable the customName field when the user changes the select box as appropriate.

Edit: HTML5

Incidentally, this is possible in HTML5, but that, of course, is not supported by all browsers:

<input list="suggestedNames" name="name">
<datalist id="suggestedNames">
  <option value="...">
  ...
</datalist>

HTML dropdownmenu adding own value

1 Answers1