выпадающее меню с вводом

Question

Я бы хотел, чтобы при щелчке по элементу элемент должен быть помещен в мой ввод. Но я не знаю, как это сделать?

<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

Answer 1

Используйте некоторые JQuery его довольно просто, сначала включают в себя библиотеку, если ее уже не входит:

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

Добавьте функцию:

JQuer у:

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

JSfiddle Example

Answer 2

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

Эта функция JQuery примет щелкнул выпадающий пункт меню и поместить его в поле ввода

Answer 3

Проверьте демонстрационный пример, я думаю, вы пытаетесь сделать это только DEMO

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