如何使用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>

在上面的引導程序表中，當我從下拉列表中選擇一個人時，我在“ TextField”中看不到顯示“請選擇該人...”的文本。

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

Answer 2

這會將選定的列表項文本放入輸入框中。

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

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

});

在這里玩

Answer 3

您是否真的需要帶下拉菜單的輸入？ 如果是，請嘗試使用引導程序構建的該插件 。 有一個選項data-live-search="true"將啟用搜索（我相信添加的輸入用於搜索）

Answer 4

然后添加類.item：

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

小提琴