Combo Box Example

by Patrick Hund

HTML

<div>
    <input placeholder="enter number" value="6"> <a><span  class="glyphicon glyphicon-arrow-down"></span></a>

    <select>
        <option value="">Any</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
    </select>
</div>

CSS

body {
    padding: 10px;
}
div {
    position: relative;
    width: 200px;
}
input {
    position: relative;
    z-index: 1;
    width: calc(100% - 20px);
    height: 20px;
}
select {
    position: absolute;
    bottom: 0px;
    right: 0px;
    z-index: 0;
    width: 100%;
    height: 20px;
}
a {
    pointer-events: none;
    z-index: 2;
    position: absolute;
    background-color: #eee;
    border: 1px solid black;
    display: inline-block;
    width: 20px;
    height: 20px;
    right: 0px;
    bottom: 0px;
    text-align: center;
}

JavaScript

function timestampDropdown() {
    elements.dropdown.val(new Date().getTime());
}

var elements = {
    input: $("input"),
    dropdown: $("select"),
    console: $("div")
};

elements.dropdown.on("change", function (event) {
    elements.input.val(elements.dropdown.val());
    timestampDropdown();
});

timestampDropdown();