CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
user2706463
user2706463

Reputation: 99

dropdown menu with input

I would like when I click on an element, the element must be placed into my input. But I don't know how to do it ?

<div class="control-group span3 offset3 ">

    <div class="input-append btn-group">
        <input  id="appendedInputButton"  type="text">
        <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
            <span class="caret"></span>
        </a>
        <ul class="dropdown-menu">
        <!-- ko foreach: $data.phoneNumbers() -->
            <li><span data-bind="text: $data.phoneNumber()"></span> </li>
             <!-- /ko -->
        </ul>
    </div>

http://imageup.fr/uploads/1377857115.jpeg

Upvotes: 3

Views: 662

Answers (3)

Simon Staton
Simon Staton

Reputation: 4505

Use some JQuery its fairly simple, first include the library if its not already included:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then add your function:

JQuery:

$(".dropdown-menu li span" ).click(function() {
  $('#appendedInputButton').val($(this).text());
});

JSfiddle Example

Upvotes: 4

Suresh Pattu
Suresh Pattu

Reputation: 6209

Check out the demo I think your trying to do this only DEMO

 $('.dropdown-menu li span').click(function(){
    var elementVal=$(this).text();
    $('#appendedInputButton').val(elementVal);
 });

Upvotes: 0

Thijs Limmen
Thijs Limmen

Reputation: 714

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

This jquery function will take the clicked drop down menu item and place it in your input box

Upvotes: 0

Related Questions