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>

在上面的Boot Strap表单中，当我从下拉列表中选择一个人时，我没有看到＆＃34; TextField＆＃34;在哪里看到它说＆＃34;请选择那个人......＆＃34;

我是Node.JS和jQUERY的新手。如何从下拉菜单中获取所选人员并将其显示在按钮上？

JSFiddle链接https://jsfiddle.net/officaluseonly2015/95h49av5/1/

Answer 1

您可以在li或a上添加点击事件，然后点击加载输入框中该元素的值。

示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这应该将所选列表项文本放在输入框中。

$(".dropdown-menu li").on("click", "a", function() {

   $("#buttondropdownperson").val($(this).text());

});

播放here

Answer 3

你真的需要输入带下拉菜单吗？如果是，请尝试使用bootstrap构建此plugin。有一个选项data-live-search="true"将启用搜索（我相信添加的输入是用于搜索）

Answer 4

然后添加类.item：

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

fiddle

如何使用jQuery从下拉列表中选择项目

4 个答案: