Skip to content Skip to sidebar Skip to footer
Home / Combobox / Html / Javascript

Editable Combo Box Javascript And Html

Post a Comment
I need to do the following thing: Using JavaScript, the HTML input tag having the text type and a select tag (combo box), create an editable combo box. I have no idea how to make a

Solution 1:

HTML5 includes the datalist element which solves this problem! :)

<html><label>Your preferred programming language: </label><inputtype="text"list="combo-options"id="combobox"><datalistid="combo-options"><optionvalue="ActionScript">ActionScript</option><optionvalue="AppleScript">AppleScript</option></datalist></html>

Solution 2:

Try something like this:

<label>Your preferred programming language: </label>
<inputtype="text"id="new_value"/><selectid="combobox"><optionvalue="">Select one...</option><optionvalue="ActionScript">ActionScript</option><optionvalue="AppleScript">AppleScript</option></select>



$("#new_value").keyup(function (e) {
    if (e.keyCode == 13) { // enter keyvar value = $(e.currentTarget).val();   // store the value from the input tagvar option = $("<option/>");            // create a new option tag
        option.val(value).text(value);          // set the value attribute as well as the content
        $("#combobox").append(option);          // insert the new object to the dom
    }
});

Post a Comment for "Editable Combo Box Javascript And Html"