How can I create an editable dropdownlist in HTML?

Question

I\'d like to create a text field with a dropdown list that lets the user choose some predefined values. The user should also be able to type a new value or select a predefin

Answer 1

This can be achieved with the help of plain HTML, CSS and JQuery. I have created a sample page:

$(document).ready(function(){
   
    $(".editableBox").change(function(){         
        $(".timeTextBox").val($(".editableBox option:selected").html());
    });
});

.editableBox {
    width: 75px;
    height: 30px;
}

.timeTextBox {
    width: 54px;
    margin-left: -78px;
    height: 25px;
    border: none;
}

            
        01:00
        02:00
        03:00
        04:00
        05:00
        06:00
        07:00
        08:00
        09:00
        10:00
        11:00
        12:00
        13:00
        14:00
        15:00
        16:00
        17:00
        18:00
        19:00
        20:00
        21:00
        22:00
        23:00
        24:00