带输入的下拉菜单

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>

然后添加你的功能：

的JQuery：

$(".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);
 });