Show value in textbox before selected from dropdown list

Question

JavaScript:

$(function(){
    $('#userID').change(function(){
        $('#username').val($('#userID option:selected').data('username'));
    });
});

HTML:

<select class="form-control" name="nip" id="userID">
    <option value='1' data-username='user_id'>1</option>
    <option value='2' data-username='user_id'>2</option>
    <option value='3' data-username='user_id'>3</option>
</select>
<input type="text" name="name" id="username">

This code works to get selected value from dropdown list into textbox if I selected data first.

My question is, how to show data in textbox before I selected data from dropdown list?

Thanks.

What data do you want to show in textbox before selecting from drop down list? — Wizard, Aug 23 '17 at 18:51
Edited. I mean if from dropdown list show value "1" first, in textbox show "1" too. Before select from dropdown list — Lamberto Fredrick Nababan, Aug 23 '17 at 18:55
Do you want to show data in textbox when you hover the mouse pointer on an option of the select box? — Wizard, Aug 23 '17 at 18:58

score 0 · Accepted Answer · answered Aug 23 '17 at 19:12

No mouse or keyboard events fire for option elements. See the msdn documentation for the events available in options:

http://msdn.microsoft.com/en-us/library/ms535877(VS.85).aspx

In this link you can see another approach to your problem:

Html Select box options on Hover?

Show value in textbox before selected from dropdown list

1 Answers1