How to select an item from a dropdown using jQuery

Question

<div class="col-md-8"> <div class="input-group"> <input id="buttondropdownperson" name="buttondropdownperson" class="form-control" placeholder="Please select the personyou are here to see" type="text" required=""> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> &lt;- <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Duty Officer</a></li> <li><a href="#">John Doe</a></li> <li><a href="#">Phillip Smith</a></li> <li><a href="#">Jessica Moore</a></li> <li><a href="#">Roger Nand</a></li> <li><a href="#">Steve Jobs</a></li> <li><a href="#">Phil Schiller</a></li> <li><a href="#">Carter Williams</a></li> <li><a href="#">Rebecca Johnson</a></li> </ul> </div> </div> </div>

In the above Boot Strap Form, when I select a person from the dropdown, I don't see the text in the "TextField" where you see it says "Please select the person..."

I am new to Node.JS and jQUERY. How can I get the selected person from the dropdown-menu and display it on the button ?

JSFiddle link https://jsfiddle.net/officaluseonly2015/95h49av5/1/

jsfiddle.net/officaluseonly2015/95h49av5/1

GettingStarted
– GettingStarted

2015-08-20 18:02:02 +00:00
Commented Aug 20, 2015 at 18:02 — GettingStarted
– GettingStarted, Commented Aug 20, 2015 at 18:02

Ajay Narain Mathur · Accepted Answer · 2015-08-20 17:56:36Z

You can add click event on the lior a and on click load the value of that element in input box.

Example:

$('.dropdown-menu>li').on('click', function() { $('#buttondropdownperson').val($(this).text()) })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-md-8"> <div class="input-group"> <input id="buttondropdownperson" name="buttondropdownperson" class="form-control" placeholder="Please select the personyou are here to see" type="text" required=""> <div class="input-group-btn"> <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> &lt;- <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="#">Duty Officer</a> </li> <li><a href="#">John Doe</a> </li> <li><a href="#">Phillip Smith</a> </li> <li><a href="#">Jessica Moore</a> </li> <li><a href="#">Roger Nand</a> </li> <li><a href="#">Steve Jobs</a> </li> <li><a href="#">Phil Schiller</a> </li> <li><a href="#">Carter Williams</a> </li> <li><a href="#">Rebecca Johnson</a> </li> </ul> </div> </div> </div>

You need to add the code in your js in document.ready() , updated your fiddle: jsfiddle.net/crot7v9f/1
Thanks for the detailed response. I am learning alot about JS. One other question. Do you know why the site looks different in IE vs Chrome? In Chrome, it looks perfect. In IE, the dropdown is missing and looks weird
Ryt now i don't have ie. I will have access to after 8 hrs. If you would wait i will definetly render vode ie and let you know the reson
@softwareisfun : Dropdown works perfect in ie 11 for me. What version IE are you using and also post URL to your website.

kiranvj · Accepted Answer · 2015-08-20 17:53:42Z

This should put the selected list item text in your input box.

$(".dropdown-menu li").on("click", "a", function() { $("#buttondropdownperson").val($(this).text()); });

Play here

Pavan Bhushan Maganti · Accepted Answer · 2015-08-20 17:58:38Z

Do you really need Input with dropdown? If yes try this plugin built using bootstrap. There is an option data-live-search="true" which will enable search(I believe input added was for search)

dropdown is a must. Its being deployed on a touch screen monitor with NO keyboard. (A virtual keyboard will be present)

Nico · Accepted Answer · 2015-08-20 18:04:19Z

add class .item then:

 $('.item').click(function() { var value = $(this).html(); $("#buttondropdownperson").val(value) });

fiddle

Collectives™ on Stack Overflow

How to select an item from a dropdown using jQuery

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

1 Comment

Comments

Related