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>

在弹出窗口中我可以选择＆＃34; 1＆＃34;传递给class =＆＃34; form-control＆＃34; value =＆＃34; 1＆＃34;

以下是示例代码： http://bootply.com/93417

Answer 1

您拥有的内容将值放在名为category的隐藏文本框中。如果您希望在搜索字段中添加一个新类（在本例中我已添加box）到其class属性并在您的脚本中调用它：

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

Twitter Bootstrap下载的事件处理程序发送值？

1 个答案: