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

Source: Internet
Author: User
Tags button type
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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.