Question

我有以下搜索栏代码，其中有一个我在按钮上开发的下拉列表和一个用于输入搜索查询的文本字段。

点击按钮我正在使用

检索文本

document.getElementById('').value;

但是如何获取下拉按钮的选定文本？

我的代码：

<div class="input-group">
    <div class="input-group-btn search-panel">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" >
            <span id="search_concept">T Shirts</span> <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#its_equal">Watches</a></li>
        </ul>
    </div>
    <input type="hidden" name="search_param" value="all" id="search_param">
    <input type="text" class="form-control" id="niket" placeholder="Search term...">
    <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
        </button>
    </span>
</div>

Answer 1

看起来你正在使用Bootstrap。 Bootstrap组件通常需要jQuery。使用jQuery将点击处理程序绑定到要从中检索值的每个下拉项目，在本例中为<a>标记。

您可以将该值存储在变量中，并在单击搜索按钮时将其检索。

(function(window, document, $, undefined) {

  var dropdownValue;

  /* Search dropdown menu for items that hold values we want, ".dropdown-menu a" */
  $('.dropdown-menu a').each(function(i, item) {

    /* Add click handler to each one, whenever one is clicked the
       dropdownValue variable is updated with it's value */
    $(this).on('click', function(e) {
      dropdownValue = this.innerText;
    });

  });

  /* Retrieve dropdown value */
  $('#apply').on('click', function(e) {
    alert(dropdownValue);
  });

}(window, window.document, jQuery));

<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="input-group">
  <div class="input-group-btn search-panel">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      <span id="search_concept">T Shirts</span>  <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" role="menu">
      <li><a href="#its_equal">Watches</a>
      </li>
      <li><a href="#its_equal">Ties</a>
      </li>
    </ul>
  </div>
  <input type="hidden" name="search_param" value="all" id="search_param">
  <input type="text" class="form-control" id="niket" placeholder="Search term...">
  <span class="input-group-btn">
        <button class="btn btn-default" type="button" id="apply"><span class="glyphicon glyphicon-search"></span>
  </button>
  </span>
</div>

另一种方法是将一个类应用于所选的<a>标记，并在单击搜索按钮时对其进行查询，这样您就不必创建变量并对其进行更新。

如何使用javascript获取按钮的选定值

1 个答案: