javascript - Twitter Bootstrap 的事件处理程序下拉发送值？

Question

告诉我如何传递从列表框中选择的值

JavaScript:

$('.dropdown-menu li').click(function(e){
  e.preventDefault();
  var selected = $(this).text();
  $('.category').val(selected);  
});

HTML

<div class="container">
    <div class="col-sm-7 pull-right well">
      <form class="form-inline" action="#" method="get">
        <div class="input-group col-sm-8">
          <input class="form-control" type="text" value="" placeholder="Search" name="q">
       <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#" id="action-1">1</a></li>
          <li><a href="#" id="action-1">2</a></li>
          <li><a href="#" id="action-1">3</a></li>
        </ul>
         <input type="hidden" name="category" class="category">
      </div><!-- /btn-group -->
        </div>
        <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
      </form>
    </div>
</div>

允许在弹窗中选择“1”传给类=“form-control”值=“1”

示例代码如下: http://bootply.com/93417

Answer 1

您将值放入名为类别的隐藏文本框中。如果您希望在搜索字段中添加一个新类(在本例中我添加了 box)到它的类属性并在您的脚本中调用它:

链接:http://bootply.com/98806

像这样:

<div class="container">
<div class="col-sm-7 pull-right well">
  <form class="form-inline" action="#" method="get">
    <div class="input-group col-sm-8">
      <input class="form-control box" type="text" value="" placeholder="Search" name="q">
   <div class="input-group-btn">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Select <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a href="#">1</a></li>
      <li><a href="#">2</a></li>
      <li><a href="#">3</a></li>
    </ul>
     <input type="hidden" name="category" class="category">
  </div><!-- /btn-group -->
    </div>
    <button class="btn btn-primary col-sm-3 pull-right" type="submit">Search</button>
  </form>
</div>

并相应地改变你的脚本

$('.dropdown-menu li').click(function(e){
   e.preventDefault();
   var selected = $(this).text();
   $('.box').val(selected);
});