Dropdown Input in HTML

Question

Hey guys I have a question. I am trying to put what I select from a drop down box into a input field and I am not sure how to do it.

Here is my code:

 <body>
<tr valign="top"> 
    <select id="dropdown">
        <option value="None">None</option>
        <option value="manufactor">Manufactor *Pending</option>
        <option value="commercial">Commercial Series *Pending</option>
        <option value="part">Part</option>
        <option value="motor">Motor</option>
    </select>
    <table>
        <td>
            <label for="Make1">Make:</label><br />
            <input type="text" name="Make" id="Make1" value="" maxlength="20">
        </td>
        <td>
            <label for="Manufactor1">Manufactor:</label><br />
            <input type="text" name="Manufactor" id="Manufactor1" value="" maxlength="15">
        </td>
        <td>
            <label for="Commercial1">Commercial:</label><br />
            <input type="text" name="Commercial" id="Commercial1" value="" maxlength="15">
        </td>
        <td>
            <label for="Part1">Part:</label><br />
            <input type="text" name="Part" id="Part1" value="" maxlength="15">
        </td>
        <td>
            <label for="motor1">Motor:</label><br />
            <input type="text" name="Motor" id="motor1" value="" maxlength="30">
        </td>
        <td>
            <label for="Dropdown1">Search Term:</label><br /> <--- want this to show what i selected from dropdown at the top.
            <input type="text" name="Dropdown" id="Dropdown1" value="" maxlength="30">
        </td>
    </table> 
</tr>

So I am wanting at the bottom Dropdown1 to show what I picked from the Dropdown but I am unsure of how this is done.

Your makrup in invalid. You have a missing `table` tag. You also can't have a `select` and `table` as the child of `tr` — asprin, Jan 14 '16 at 09:11
Check out: http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript — ᴍᴀᴛᴛ ʙᴀᴋᴇʀ, Jan 14 '16 at 09:17

score 1 · Accepted Answer · answered Jan 14 '16 at 09:13

1

By using Jquery you can achieve your requirement.

By using Change function.

Here is the working fiddle for you. Fiddle

$('#dropdown').change(function(){
$('#Dropdown1').val($(this).find(":selected").text())
;
});

-Help

answered Jan 14 '16 at 09:13

Help

1,156
7
11

So with this would I just insert it where the input is? Sorry I am new to HTML – Alex Jan 14 '16 at 09:18
You need to put this in tags with in your HTML . If using jQuery like here you'll need to reference the jQuery library too. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Jan 14 '16 at 09:19
1

You need to add jquery library first, then the code must be written in the script tag. – Help Jan 14 '16 at 09:19

Dropdown Input in HTML

1 Answers1