Html dropdown menu insert into text box?

Question

Hi is there a way to have a drop down menu insert its dictionary value into a textbox? For example lets say dropdown shows , shape, tool. When you click the color option then "orange" would populate the textbox, if you select shape then "square" would populate, so on and so forth.

Also when you type something into the textbox the dropdown selected item disappears.

<!Drop down menu with search function->
<p>Load Previous Run or Load Test Plan ID.</p>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var dropDown = [" ","color", "shape", "tool"];
          var dropDownID = [" ","orange", "square", "hammer"];
                $("#dropDown").select2({
                  data: dropDown
                });
            });
        </script>
    </head>
    <body>
        <div>
            <select id="dropDown" style="width:300px;">
            <!-- Dropdown List Option -->
            </select>
        </div>
    </body>

<!TRPID Input box->
<br><br>    Testrail Plan ID:<input type="text" TTPID="PlanID"><br><br>

Answer 1 · 2016-12-09T16:19:55Z

December 9, 2016 4:19pm

Hi Farbod,

You'll want to use JavaScript to detect a change to the drop-down menu with the values. You can do that with an on.('change', '#element', function() {}); event handler.

Once the change is detected, you can then use you jQuery to populate the textbox using the .val() function.

There are a couple of StackOverflow articles that break this down further:

I think your use can be a lot simpler by only detecting a change and then modifying the textbox with .val(), so don't feel the need to follow those answers to the letter.

Welcome to the Treehouse Community

Looking to learn something new?

Farbod Jahan

Farbod Jahan

Html dropdown menu insert into text box?

1 Answer

Austin Whipple

Austin Whipple