JSFiddle - React, Tailwind, and code Playground

by lostinplace

HTML

<div style="position: relative;">
    <!--[if lte IE 6.5]><div class="select-free" id="dd3"><div class="bd" ><![endif]-->
    <input name="TextboxExample" type="text" maxlength="50" id="TextboxExample" tabindex="2"
        onchange="DropDownIndexClear('DropDownExTextboxExample');" style="width: 242px;
        position: absolute; top: 0px; left: 0px; z-index: 2;" />
    <!--[if lte IE 6.5]><iframe></iframe></div></div><![endif]-->
    <select name="DropDownExTextboxExample" id="DropDownExTextboxExample" tabindex="1000"
        onchange="DropDownTextToBox(this,'TextboxExample');" style="position: absolute;
        top: 0px; left: 0px; z-index: 1; width: 265px;">
        <option value="Value for Item 1" title="Title for Item 1">Item 1</option>
        <option value="Value for Item 2" title="Title for Item 2">Item 2</option>
        <option value="Value for Item 3" title="Title for Item 3">Item 3</option>
    </select>
    <script language="javascript" type="text/javascript">
        //Since the first <option> will be preselected the IndexClear function must fire once to clear that out.
        DropDownIndexClear("DropDownExTextboxExample");
    </script>
</div>

CSS

.select-free
    {
        position: absolute;
        z-index: 10; /*any value*/
        overflow: hidden; /*must have*/
        width: 247px; /*must have for any value*/ /*width of area +5*/
    }
    .select-free iframe
    {
        display: none; /*sorry for IE5*/
        display: /**/ block; /*sorry for IE5*/
        position: absolute; /*must have*/
        top: 0px; /*must have*/
        left: 0px; /*must have*/
        z-index: -1; /*must have*/
        filter: mask(); /*must have*/
        width: 3000px; /*must have for any big value*/
        height: 3000px /*must have for any big value*/;
    }
    .select-free .bd
    {
        padding: 11px;
    }

JavaScript

function DropDownTextToBox(objDropdown, strTextboxId) {
        document.getElementById(strTextboxId).value = objDropdown.options[objDropdown.selectedIndex].value;
        DropDownIndexClear(objDropdown.id);
        document.getElementById(strTextboxId).focus();
    }
    function DropDownIndexClear(strDropdownId) {
        if (document.getElementById(strDropdownId) != null) {
            document.getElementById(strDropdownId).selectedIndex = -1;
        }
    }