html - 带输入的下拉菜单

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>

然后添加您的功能：

查询：

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

JSfiddle 示例

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);
 });