Textbox and Dropdown combined

by michaelkhalili on September 27, 2009

While creating a form for a project I wanted to give the user the option of either creating a new entry or selecting from an existing one. The standard way to do it is to give the user a textbox on one line and a dropdown on another. As with most forms, I wanted to limit the space used so the user wont get overwhelmed by the amount of data he needs to enter. My solution was to join the two objects as you can see in the following screen shot.

Working Demo / Example

Textbox-Dropdown-Combination-Screenshot

The textbox is placed on top of the dropdown with enough room on the right to still display the down arrow of the dropdown. You can see that the user is either able to enter new text into the textbox or select an option from the dropdown.

To display the box properly I use HTML and CSS. When the user selects an option from the dropdown I use Javascript to load the value into the textbox. When the form is submitted ignore the dropdown and just pull the value from the textbox. The trickiest part of this was that IE 6 wasn’t able to display the textbox over the dropdown properly. Thanks to Hedger Wang and his fix I was able to make this work across browsers.

This style code is used to overcome the issues with IE6. Place the following code in between the <head></head> tag of your page.

<style type="text/css">
    /*fix dropdown z-index problem. Credit to http://hedgerwow.blogspot.com/ */
    .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;
    }
</style>

This is the Javascript used to display the value in the textbox when the user selects an option from the dropdown. This also goes in between your <head></head> tag.

<script language="javascript" type="text/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;
        }
    }
</script>

This is the HTML that includes the textbox, dropdown and the div that goes around it. You’ll notice IE conditional statements in commented area. This is part of the patch from Hedger Wang’s website. The style was placed on the actual control for simplicity, you can move it to a CSS file if you like.

<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>
  • Howard

    Thanks Michael. Great code – tested it with Chrome
    It would be great to be able to display multiple combined textboxes/drop-downs – but I couldn’t get it to work. Is it possible?

    • http://MichaelApproved.com/ MichaelApproved

      I haven’t tried it out on Chrome yet. Are you able to get just one to work? Is the problem multiple combined textboxes or does it not work on Chrome at all?

      • Howard

        Hey :) It works perfectly in Chrome, sorry if i wasn’t clear about that. The problem is i can’t code Javascript very well and I simply couldn’t figure out how to put more than 1 combo box in a form, if indeed it is possible. So, in advance of me hacking the code and spending hours attempting to get it to do this I just wanted to ask your opinion on whether this would be possible. Thanks! Howard

        • http://MichaelApproved.com/ MichaelApproved

          You shouldn’t have to change the JS. Just make sure you update the object names DropDownExTextboxExample and TextboxExample to something different for each new combo you create. Use the new object names in the onchange events.

          • Howard

            I did exactly as you directed and it works, thanks a million Michael!

  • David Low

    This is a great solution but I did find one thing that does n’t seem right. When I click on the dropdown directly the select item 1 does not populate the text box.

    When I debugged it the onchange trigger for the dropdown did not fire. The reason is to do with the initial value of the selectedIndex which is 0 at this point. When I initialised it to -1 by calling DropDownIndexClear before entering the dropdown it works.

    I am not sure of the best point of initialisation though. I tried on an onclick which is ok for IE8 and Firefox 3.6 but it did not work on Safari. It does work though on a onmouseover but I am not convinced this is the most elegant solution.

    • john

      i noticed this too

    • http://MichaelApproved.com/ MichaelApproved

      Thanks for catching and reporting this bug. The problem was that the first option in the dropdown was automatically being selected Though it’s the normal behavior of a dropdown, in this case it’s causing a problem for us. I missed that because the textbox was covering the dropdown and hiding that item 1 was already selected. Because it was already selected the onchange event wouldn’t fire if it was reselected.

      The solution is to execute the DropDownIndexClear function once when the page loads. I updated the code to include this fix.

  • john

    very nice. it works well in an ajax/dhtml table that i have. i couldnt get dhtmlxcombo to work but yours is working great. I’m having a little trouble cssing it up but it will probably work thanks

  • Anonymous

    In this we cant able to get the items in the dropdownlist….But we want to view the items in the dropdown as well as to insert a new item in it…. plz help us

    • http://MichaelApproved.com/ MichaelApproved

      This example is meant to show how to put a textbox over a dropdown list and allow a user to select from the list or enter new data. Updating a dropdown list is a separate article which others have already written about. http://www.google.com/search?q=javascript+update+dropdown

  • Cougar B

    The link in code #1 should be updated to somewhere on:
    http://hedgerwow.blogspot.com/
    hedgerwow.com no longer works.

    • http://MichaelApproved.com/ MichaelApproved

      Fixed. Thanks for letting me know.

  • Boat_adam

    You are awesome, You have helped me with a very difficult issue. Thank you

  • Rajeshbargode

    hi here is one textbox and one dropdownlist when i entred no in textbox the mathcing item no in dropdownlist will be selected.

  • Mark Paulson

    Thanks for this!  This is really helpful.  I’m having a problem that relates to relative position.  If I just put the div in a cell, then the textbox/dropdown sets itself up on the bottom of the cell.  If I put a dummy text field, with a width of zero, then the textbox/dropdown plops itself right on top of it, centered vertically on the left side of the cell, where I’d like it to be.  I know I’m having a novice issue here (I’m a Java guy that’s learning JavaScript is for far more than validating input), but have I explained myself well and is there a more elegant way to make sure it’s centered vertically in the cell?

    • http://MichaelApproved.com/ MichaelApproved

       I’m not sure I’m following 100% but if you’re trying to center something vertically in a table, you should be able to give the cell a vertical alignment of middle like so:

      If you’re trying to do something else, it’s best to link over to some examples so I can clearly see what you’re trying to do and what’s actually happening.

  • Ledipo

    This is great!  Thanx.
    My problem is on relaod I don’t get the input box;  I get the last selected item. I can clear and type. Is there a simply way to get the input on top on reload? thanks!

    • Ledipo

      Fixed it by adding a blank option as selected by default. When the user selects it it becomes a text input box seemlessly as designed by Michael.

  • Jenny

    great codes here!! thank you!

  • Josh11int

    bobo!

  • http://twitter.com/vtdoan da minh doan

    thanks for this post, this work fine in my site Wap tai tin nhan sms hay

  • http://www.identitykit.org Peter Anyebe

    Michael
    Khalili,

    Greetings!

    I am not an IT

    But I am able to write simple codes, to do my maths

    I am doing a demo maths instrument

    I need to input 7 sets of data

    I decided to adopt the dropdown for convenience

    But could not retrieve the data for use in the
    calculations

    This requires that the data is input to a textbox

    Before it can be accessed by the method for the calculations

    I did not have the skill for the maneuver

    Then I stumbled into your code that combines
    Textbox and Dropdown!

    I need to adopt it for my instrument, but do not have the skill

    Please could you do it for me?

    I work with MS Expression4

    Looking to see the adopted version

    Best regards

    My
    Code

    PcScore

    1.64

    1.58

    1.65

    1.34

    1.18

    1.69

    1.66

    1.4

    2.65

    1.32

    1.8

    1.95

    2.85

    2.33

    2.6

    3.64

    5.37

         

    RnScore

    2.28

    2.16

    0.74

    1.09

    1.09

    2.61

    3.57

    2.39

    3.1

    2.2

    2.6

    2.89

    2.74

    3.66

    4.7

    6.29

    7.29

    NNScore

    2.13

    2.05

    1.36

    1.56

    1.36

    2.06

    1.26

    1.19

    1.89

    1.1

    2.35

    2.55

    2.81

    3.08

    3.7

    4.89

    6.03

    Revenue

    156783

    156835

    160504

    48077

    124028

    9.78

    13281

    23675

    107786

    31944

    9270111

    45553

    5642

    21.8

    88915

    561.254598

    5473439

    529648

    Profit

    19339

    3406

    7419

    934

    20164

    0.5592

    1773

    3908

    7574

    7439

    195649

    12695

    4547

    5.85

    2383

    143.200212

    1870302

    136816

    CM

    50580

    104885

    128348

    37288

    49556

    8.54

    3026

    2747

    54103

    11374

    7766799

    10109

    4413

    8.62

    77739

    232.672021

    2907916

    257427

    BHI

    1.4707

    1.5141

    1.54

    1.5859

    1.6866

    2.0947

    2.3959

    2.6748

    2.8371

    3.1133

    3.7134

    4.0428

    6.2599

    6.8961

    6.9891

    7.3085

    11.1900

    40.8397

Previous post:

Next post: