javascript - 如何使用 jQuery 从下拉列表中选择一个项目

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>

在上面的 Bootstrap 表单中，当我从下拉列表中选择一个人时，我在“文本字段”中看不到文本，您可以在其中看到“请选择该人...”

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

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

Answer 1

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

示例:

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

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