JS Implementation Click the Drop-down menu to sync the selected content into input box

recently, the blogger in the edge of learning flask writing test platform, encountered a more commonly used scene as shown in the following figure

Here is an input frame group, the Drop-down menu has 3 options, there is an input box, the code is written in bootstrap, the code is posted to everyone

<div class= "input-group-btn" > <button type= "button" class= "Btn B Tn-default dropdown-toggle "data-toggle=" dropdown "> Project name <SP An class= "caret" ></span> </button> <ul id= "project" Clas 
                            s= "Dropdown-menu" > <li value= "Account" ><a href= "#" >account</a></li> <li class= "Divider" ></li> <li value= "Drive" ><
                            ; a href= "#" >drive</a></li> <li class= "Divider" ></li>
                <li value= "Qing" ><a href= "#" >qing</a></li> </ul> </div> 

My goal is when I click on this drop-down menu of an option, can automatically get the value, fill in the input, so that the previous version of only one input also have to manually hit the user's trouble. How to do synchronization, of course, with JS to do a listening, but also relatively simple.

$ ("#project"). On ("Click", "Li", function () {
        $ (' #proname '). Val ($ (this). text ());
});

This code means that monitoring the click of the UL event, the object is the following Li element, when the click Li, get to Li's text to the input box to assign value, achieve the effect of the following figure.

Hope to help you.